#javascript #html #dom #caret #html-input-element
Вопрос:
Могу ли я иметь элемент ввода чисел, в котором цифры вводятся справа налево без ручного перемещения курсора между ними? Приложение предназначено для обучения основам ментальной арифметики, где этот порядок более естественен.
Я также хотел бы, чтобы мой элемент ввода был настроен как число. Как автоматическое добавление шаговых кнопок на рабочем столе, так и выбор цифровой клавиатуры на мобильных устройствах являются полезными.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange пишет:
Обратите внимание, что в соответствии со спецификацией форм WHATWG
selectionStart
selectionEnd
свойства иsetSelectionRange
метод применяются только к вводам типов текст, поиск, URL, тел и пароль. Chrome, начиная с версии 33, выдает исключение при доступе к этим свойствам и методу для остальных типов ввода. Например, при вводе номера типа: «Не удалось прочитать свойство ‘SelectionStart’ из ‘HTMLInputElement’: Тип входного элемента («число») не поддерживает выбор».
И действительно, хотя я могу довольно легко получить то, что мне нужно для ввода текста, в недавнем Chrome это не удается с помощью элемента ввода чисел, как показано в моей демонстрации ниже. Текущие конечные точки выбора всегда null
предназначены для элемента ввода числа.
Есть ли какой-либо способ обойти ограничения и манипулировать положением курсора / курсора числового элемента? Или, за исключением этого, любой способ заставить текстовый элемент отклонять ввод без цифр, показывать шаг и использовать цифровую клавиатуру, в идеале без привязки к тяжелым зависимостям библиотеки, таким как Angular?
const dbg = document.getElementById("dbg");
["txt", "num"].forEach(id => {
const elt = document.getElementById(id);
elt.addEventListener("input", evnt => {
dbg.innerText = `evnt.inputType = ${evnt.inputType}, elt.selectionStart = ${elt.selectionStart}, elt.selectionEnd = ${elt.selectionEnd}`;
if (evnt.inputType == "insertText" amp;amp;
elt.selectionStart === 1 amp;amp;
elt.selectionEnd === 1) {
elt.setSelectionRange(0, 0);
}
});
});
<p>Text: <input type="text" id="txt"></p>
<p>Number: <input type="number" id="num"></p>
<p>Debug: <span id="dbg"></span></p>
Ответ №1:
Я могу просто сделать это с помощью css.
<p>Text: <input type="text" id="txt" style="direction: rtl"></p>
<p>Number: <input type="number" id="num" style="direction: rtl"></p>
<p>Debug: <span id="dbg" ></span></p>
Есть ли какие-либо ограничения на то, чтобы не использовать это?