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

【问题标题】：How can I change the text direction of a number input element?如何更改数字输入元素的文本方向？
【发布时间】：2022-04-01 05:00:31
【问题描述】：

我可以有一个数字输入元素，其中从右到左输入数字而无需在两者之间手动移动光标吗？该应用程序用于训练基本的心算，其中的顺序更自然。

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

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

请注意，根据WHATWG forms specselectionStart、selectionEnd 属性和setSelectionRange 方法仅适用于文本、搜索、URL、电话和密码类型的输入。 Chrome 从版本 33 开始，在访问其余输入类型的这些属性和方法时会引发异常。例如，在输入数字类型时：“无法从 'HTMLInputElement' 读取 'selectionStart' 属性：输入元素的类型（'数字'）不支持选择”。

确实，虽然我可以很容易地获得我想要的文本输入，但在最近的带有数字输入元素的 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" &&
            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>

【问题讨论】：

标签： javascript html right-to-left html-input

【解决方案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>

【讨论】：