剑道自动完成-将光标设置在自动完成文本的开头

Question

请参阅以下示例

https://dojo.telerik.com/IxeruLIH/2

当我使用自动完成功能选择值："超长国家名称，不适合盒子"时，我会从浏览器中得到以下行为：

Chrome：默认情况下，显示文本的开头(良好(。

InternetExplorer:默认情况下，显示文本的末尾(Bad(，但我能够修复select事件处理程序中的focus((和setSelectionRange((调用。

Firefox：默认情况下，会显示文本的末尾(Bad(，在这种情况下我找不到任何可以修复的东西。

有人知道我如何在Firefox中解决这个问题吗？

谢谢！

Answer 1

问题取决于关闭弹出窗口建议的延迟。

您可以考虑在运行代码之前等待几毫秒。如果你注意这个问题也是铬和即

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>