jquery - Kendo AutoComplete - 在自动完成文本的开头设置光标
问题描述
请看这个例子
https://dojo.telerik.com/IxeruLIH/2
当我使用自动完成功能选择值时:“超长国家名称不适合在框中”,我从浏览器中得到以下行为:
Chrome:默认情况下,显示文本的开头(良好)。
Internet Explorer:默认情况下,显示文本的结尾(错误),但我能够通过 select 事件处理程序中的 focus() 和 setSelectionRange() 调用进行修复。
Firefox:默认情况下,显示文本的结尾(坏),在这种情况下我找不到任何可以修复的东西。
有谁知道如何在 Firefox 中解决这个问题?
谢谢!
解决方案
该问题与关闭弹出窗口建议的延迟有关。
您可以考虑在运行代码之前等待几毫秒。如果你注意这个问题也适用于 chrome 和 ie。
select: function (e) {
setTimeout(function () {
$("#countries").focus();
$("#countries")[0].setSelectionRange(0, 0);
}, 100);
}
var data = [
"Austria",
"Azerbaijan",
"Super Long Country Name That Wont Fit In Box",
"Ukraine",
];
$("#countries").kendoAutoComplete({
dataSource: data,
placeholder: "Select country...",
separator: ", ",
select: function (e) {
setTimeout(function () {
$("#countries").focus();
$("#countries")[0].setSelectionRange(0, 0);
}, 100);
}
});
html {
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
}
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.common-material.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.3.1017/styles/kendo.material.mobile.min.css"/>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.3.1017/js/kendo.all.min.js"></script>
<div id="example">
<input id="countries" style="width: 200px;"/>
</div>
推荐阅读
- python - 每两列绘制一次
- python - 用 Python 更新数据库。Mysql 可以忽略 ' 内容中的样式标记吗?
- python - 如何获取 json 列表的最后一个元素?
- amazon-web-services - 有没有办法在开始在 Elastic Beanstalk 中部署之前等待完成所有 cron 作业
- c++ - #包括
停止在 C++20 中工作? - javascript - 如何获得窗口高度和滚动位置之间的差异?
- docker - 如何通过 docker 将 IDS 中的 ueye 相机与 ROS 一起使用?
- angular - Angular:订阅中的单元测试变量
- ios - IOS 应用程序终止时终止 chromecast 会话
- reactjs - 与 useReducer 一起使用时,useEffect 不会触发重新渲染