¿Puedo tener un elemento de entrada de números donde los dígitos se ingresen de derecha a izquierda sin el movimiento manual del cursor en el medio? La aplicación es para entrenar aritmética mental básica, donde ese orden es más natural.

También me gustaría tener mi elemento de entrada configurado como un número. Tanto la adición automática de botones paso a paso en el escritorio como la elección de un teclado numérico en los dispositivos móviles son beneficiosas.

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange escribe:

Tenga en cuenta que, de acuerdo con las especificaciones de formularios WHATWG , selectionStart , las propiedades selectionEnd y el método setSelectionRange se aplican solo a las entradas de tipo texto, búsqueda, URL, teléfono y contraseña. Chrome, a partir de la versión 33, lanza una excepción al acceder a esas propiedades y métodos en el resto de tipos de entrada. Por ejemplo, en la entrada del número de tipo: "Error al leer la propiedad 'selectionStart' de 'HTMLInputElement': el tipo del elemento de entrada ('número') no admite la selección".

Y, de hecho, si bien puedo obtener lo que quiero con bastante facilidad para una entrada de texto, me falla en Chrome reciente con un elemento de entrada de número, como muestra mi demostración a continuación. Los puntos finales de selección actuales siempre son null para un elemento de entrada de número.

¿Hay alguna forma de evitar las restricciones y manipular la posición del cursor/intercalación de un elemento numérico? O, salvo eso, ¿alguna forma de hacer que un elemento de texto rechace la entrada que no sea un dígito, muestre un paso a paso y use un teclado numérico, idealmente sin vincular dependencias de bibliotecas pesadas como 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" && elt.selectionStart === 1 && 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>