Блог

Главная - Вопросы по программированию - Введите номер справа налево

Введите номер справа налево

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

Есть ли какие-либо ограничения на то, чтобы не использовать это?

Метки: