Question

请参见此示例

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

当我使用自动完成功能来选择值：“不能放入框内的超长国家/地区名称”时，我从浏览器中得到以下行为：

Chrome浏览器：默认情况下，显示文本的开头（良好）。

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

Firefox：默认情况下，该文本的末尾显示为（Bad），在这种情况下，我找不到任何要修复的内容。

有人知道如何在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>

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

1 个答案: