用户写作时，如何将文本光标保持在右侧的 html 输入字段中？答案

【问题标题】：How to keep the text cursor inside an html input field to the right while the user is writing?用户写作时，如何将文本光标保持在右侧的 html 输入字段中？
【发布时间】：2019-08-23 11:07:13
【问题描述】：

基本上我有一个输入文本（我实际上是在做反应，但在普通的 html5-javascript 中解决方案可能相同或非常相似），我希望文本光标在用户点击时永久保持在右侧在它上面，并且即使用户在他写了一些东西后点击了输入内容的另一个位置，文本光标仍然会立即移动到右端。

我尝试了找到的不同解决方案，但似乎没有任何效果。

我尝试使用 onFocus 事件传递这样的函数，如本网站上的一些问题中所建议的那样：

repositionCursorToTheRight = (e) => {
    const val = e.target.value;
    e.target.value = '';
    e.target.value = val;
};

重置输入会强制文本光标重置其位置的想法，但它不会发生（至少在 Firefox 中没有）。

我尝试使用event.target.selectionStart 和event.target.selectionEnd 将它们设置为不同的值，例如输入值的全长、0 等……但这似乎也完全没有效果。

有什么想法吗？

编辑：我会更好地解释原因并举个例子，我只想指定这是一个客户业务请求，我不能覆盖它。所以我需要这个，因为我有一个输入表单，它必须有 2 个固定小数，即使为零也必须始终显示。客户想要一个类似于大多数货币转换器应用程序的表单，如果用户想要在其中写入，例如，12.35 它应该按顺序查看0.00（默认值）-> 0.01 -> 0.12 - > 1.23 -> 12.35。希望现在很清楚

【问题讨论】：

"[即使]一旦用户在输入内容的另一个位置[点击]，一旦他写了一些东西，文本光标仍然会立即移动到右端。" - 为什么你要故意用这种不直观、对抗性的用户界面来挫败你的用户？
这是否意味着您想强制用户始终重新输入整个单词，而不是在其间添加字母？如果用户使用键盘箭头移动光标而不是单击会怎样？正如您所提到的，您可以使用 selectionRange 执行此操作，但我很好奇它的用例是什么，因为您基本上想打破人们多年来习惯的行为。
@DavidThomas 这不是我的决定，但我必须执行它，因为它是来自“上面的业务”的请求，我无法反驳它，因为客户特别要求它。基本上，他们有一种形式，他们希望用户在输入中插入恰好有 2 个固定小数的数字（即使全部设置为 0，也必须始终可见），并且他们认为一个很好的解决方案是始终从右边，就像在大多数计算器应用中一样。
您是否要实现从右到左的文本输入？您可以将属性dir="rtl" 添加到文本输入以执行此操作。如果在任何地方检测到单击以重置克拉，也许只需清除条目。否则 textRange 可能会在这里提供帮助：stackoverflow.com/a/6249440/2244284

标签： javascript html reactjs input

【解决方案1】：

你可以用这个进行测试，我已经在 Chrome、Edge、Firefox 和 IE 11 中测试过。

<script>

    // Get all inputs
    var inputs = document.querySelectorAll('input');

    // Add event listeners
    for (var i = 0; i < inputs.length; i++)
    {
        inputs[i].addEventListener('focusin', resetCursor, false);
        inputs[i].addEventListener('click', resetCursor, false);
    }

    // Reset a cursor to the end
    function resetCursor(event)
    {
        setTimeout(function () { event.target.selectionStart = event.target.value.length; }, 10);

    }
</script>

【讨论】：