Kendo AutoComplete - 在自动完成文本的开头设置光标

Question

请看这个例子

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

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

Chrome：默认显示文本的开头（Good）。

Internet Explorer：默认情况下，显示文本的结尾（错误），但我能够通过 select 事件处理程序中的 focus() 和 setSelectionRange() 调用进行修复。

Firefox：默认情况下，显示文本的结尾（坏），在这种情况下我找不到任何要修复的东西。

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

谢谢！

Answer 1

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

您可以考虑在运行代码之前等待几毫秒。如果你注意这个问题也适用于 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>