如何更改数字输入元素的文本方向？

Question

我可以有一个数字输入元素，其中数字是从右到左输入的，中间没有手动移动 cursor 吗？ 该应用程序用于训练基本心算，其中顺序更自然。

我还想将输入元素配置为数字。 在桌面上自动添加步进按钮和在移动设备上选择数字键盘都是有益的。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/setSelectionRange写道：

请注意，根据WHATWG forms 规范selectionStart 、 selectionEnd属性和setSelectionRange方法仅适用于文本、搜索、URL、电话和密码类型的输入。 Chrome，从版本 33 开始，在访问输入类型 rest 上的那些属性和方法时抛出异常。 例如，对于数字类型的输入：“无法从‘HTMLInputElement’读取‘selectionStart’属性：输入元素的类型（‘数字’）不支持选择”。

事实上，虽然我可以很容易地获得我想要的文本输入，但在最近的带有数字输入元素的 Chrome 上，它对我来说失败了，如下面的演示所示。 对于数字输入元素，当前选择端点始终为null 。

有什么办法可以解决这些限制并操纵数字元素的 cursor / 插入符号 position 吗？ 或者，除此之外，有什么方法可以使文本元素拒绝非数字输入、显示步进器并使用数字键盘，最好不要链接到像 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

您可以使用 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>