How can I change the text direction of a number input element?

Question

Can I have a number input element where the digits are entered right to left without manual cursor movement in between? The application is for training basic mental arithmetic, where that order is more natural.

I'd like to also have my input element configured as a number. Both the automatic addition of stepper buttons on desktop and the choice of a numeric keyboard on mobile devices are beneficial.

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

Note that according to the WHATWG forms spec selectionStart , selectionEnd properties and setSelectionRange method apply only to inputs of types text, search, URL, tel and password. Chrome, starting from version 33, throws an exception while accessing those properties and method on the rest of input types. For example, on input of type number: "Failed to read the 'selectionStart' property from 'HTMLInputElement': The input element's type ('number') does not support selection".

And indeed, while I can get what I want fairly easily for a text input, it fails for me on recent Chrome with a number input element, as my demo below shows. The current selection endpoints are always null for a number input element.

Is there any way to work around the restrictions and manipulate the cursor / caret position of a number element? Or, barring that, any way to make a text element reject non-digit input, show a stepper and use a numeric keyboard, ideally without linking in heavy library dependencies like 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>

Answer 1

You can do that using 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>