Kendo AutoComplete - установить курсор в начале автозаполненного текста - PullRequest
Новая
       21

Kendo AutoComplete - установить курсор в начале автозаполненного текста

0 голосов
/ 03 ноября 2018

Пожалуйста, посмотрите этот пример

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

Когда я использую функцию автозаполнения, чтобы выбрать значение: «Супер длинное название страны, которое не помещается в поле», я получаю следующие поведения из браузеров:

Chrome: по умолчанию отображается начало текста (хорошо).

Internet Explorer: по умолчанию конец текста отображается (Плохо), но мне удалось исправить с помощью вызовов focus () и setSelectionRange () в обработчике события select.

Firefox: по умолчанию отображается конец текста (плохо), и я не могу найти ничего, что можно исправить в этой ситуации.

У кого-нибудь есть идеи, как я могу это исправить в Firefox?

Спасибо!

1 Ответ

0 голосов
/ 03 ноября 2018

Проблема связана с задержкой закрытия всплывающего окна.

Вы можете подождать несколько миллисекунд, прежде чем запускать свой код. Если вы обратите внимание, проблема также для хрома и т. Д. 

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>
...