Question

我正在使用以下代码将输入值更改为大写：

<script>
function uppercase(z){
    v = z.value.toUpperCase();
    z.value = v;
}
</script>

<input type="text" id="example" onkeyup="uppercase(this)">

问题是，当我在文本中间键入内容时，光标会跳到文本末尾。在Google上搜索时，我尝试遵循以下代码，但根本无法正常工作：

function uppercase(z){
    document.getElementById(z).addEventListener('input', function (e) {
      var target = e.target, position = target.selectionStart; // Capture initial position
      target.value = target.value.replace(/\s/g, ''); // This triggers the cursor to move.

      v = z.value.toUpperCase();
      z.value = v;

      target.selectionEnd = position; // Set the cursor back to the initial position.
    });
}

第一个代码运行正常，但是我仍然不知道如何防止光标跳动。

Answer 1

您可以通过简单地添加一些CSS样式来实现：

#example {
    text-transform: uppercase;
}

这将使输入字段中的所有字母均显示为大写字母，但该值仍然相同。如果您需要将该值转换为大写，则在需要时将其转换为大写（例如，在提交之前）

Answer 2

我一直在几个小时之后寻找解决这个问题的方法。

添加CSS对我来说是成功的窍门，但有一个特殊要求，即我们的后端api仅接受大写的字符串。

此外：

#example {
    text-transform: uppercase;
}

我还添加了侦听onBlur和keydown.enter的回调，并在触发这些事件时将输入值转换为大写。

附言：
没有示例代码，因为我只是向那些同样头痛并且不想入侵HTMLInputElement.setSelectionRange的人们分享自己的想法。

Answer 3

您还可以将光标位置设置为onkeyup（或使用的任何方式，只要您获得对输入元素的引用）

function withSelectionRange() {
  const elem = document.getElementById('working');
  // get start position and end position, in case of an selection these values
  // will be different
  const startPos = elem.selectionStart;
  const endPos = elem.selectionEnd;
  elem.value = elem.value.toUpperCase();
  elem.setSelectionRange(startPos, endPos);
}

function withoutSelectionRange() {
  const elem = document.getElementById('notWorking');
  elem.value = elem.value.toUpperCase();
}

<div style="display: flex; flex-direction: column">
  <label for='working'>Uppercase text with selection range</label>
  <input id='working' type='text' onkeyup="withSelectionRange()"></input>

  <label for='notWorking'>Uppercase text input without selection range</label>
  <input id='notWorking' type='text' onkeyup="withoutSelectionRange()"></input>
</div>

Link to codepen

将输入更改为大写，而光标不会跳到文本的结尾

3 个答案: