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

Question

请看这个例子

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

当我使用自动完成功能 select 值："Super Long Country Name That Wont Fit In Box"，我从浏览器得到以下行为：

Chrome: 默认显示正文开头(Good)。

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

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

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

谢谢！

Answer 1

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

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

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>

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

Kendo AutoComplete - Set Cursor at beginning of autocompleted text

css

jquery

focus

autocomplete

kendo-ui