IE11编辑值时将光标移动到输入的开头答案

【问题标题】：IE11 moves cursor to beginning of input when editing valueIE11编辑值时将光标移动到输入的开头
【发布时间】：2015-07-09 15:56:56
【问题描述】：

我在一个项目上遇到了一个非常奇怪的问题。长话短说，我有记录利率的输入字段，因此在模糊处附加一个 % 并在焦点处删除。它适用于除 IE11 之外的所有浏览器。出于某种原因，它会将光标移动到输入的开头，这对于快速浏览和输入值的人来说很烦人。

这是一个简化的例子：

$('#test').val('default');

$('#test').focus(function() {
    var value = $(this).val().slice(0, -1);
    $(this).val(value);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="test" />

同样，这只发生在 IE11 中（在旧版本的 IE 中可以正常工作）。有没有人遇到过这个问题？在重新分配值后，我尝试再次强制焦点，但这并没有解决问题。任何提示都表示赞赏。

【问题讨论】：

stackoverflow.com/questions/14508707/…
那你想要什么行为呢？它应该选择整个文本？
我希望光标停留在输入的末尾，就像默认一样（即它应该停留在原处）。

标签： javascript jquery internet-explorer internet-explorer-11

【解决方案1】：

您可以尝试在附加/删除 % 标记时手动设置插入符号位置，使用这两个函数（这些函数非常通用，如果您需要在其他时间为所有浏览器设置插入符号位置，它们应该适用于每个浏览器）：

function getCaretPosition(element) {
  var caretPos = 0;
  if (element.type === 'text' || element.type === 'tel') {
    if (document.selection) { // IE Support
      element.focus();
      var Sel = document.selection.createRange();
      Sel.moveStart('character', -element.value.length);
      caretPos = Sel.text.length;
    } else if (element.selectionStart || element.selectionStart === '0') {// Firefox support
      caretPos = element.selectionStart;
    }
  }

  return caretPos;
}

function setCaretPosition(element, position) {
  if (element.type === 'text' || element.type === 'tel') {
    if (element.setSelectionRange) {
      element.focus();
      element.setSelectionRange(position, position);
    } else if (element.createTextRange) {
      var range = element.createTextRange();
      range.collapse(true);
      range.moveEnd('character', position);
      range.moveStart('character', position);
      range.select();
    }
  }
}

并且仅在使用 IE11 时调用它们 :) 此外，如果您愿意，您可以使这些函数更具体，删除 FF 的部分 :)

【讨论】：

感谢您的回复。在小提琴中尝试过，问题仍然存在：jsfiddle.net/n4zqn3y5/1
尝试在对该字段进行任何操作之前获取插入符号位置，然后在操作后进行相应设置，而不是在一次操作中：) 您的代码基本上只是将插入符号位置放在当前位置。另一种方法是在字符串末尾设置插入符号 - 使用 .val().length。
jsfiddle.net/n4zqn3y5/3 实际上只是尝试过。仍然遇到问题。它显然返回了正确的长度......
那些函数在纯 DOM 节点上运行，将你的函数调用更改为：setCaretPosition(this, $(this).val().length); 而不是使用$(this)，它应该可以立即工作。
太棒了。谢谢你为我解决了这个问题。这是一个小问题，但非常烦人。

【解决方案2】：

这个问题可以通过以下方式解决：

获取对输入元素的引用
添加onfocus 事件处理程序

然后将onfocus处理程序中的选择范围设置为输入值的末尾，如下所示：

const onFocus = (el) => {
  const { value } = el.value
  el.setSelectionRange(value.length, value.length);
}

<input type='text' onfocus='onFocus(this)'  />

如果你使用 ReactJS，here 就是那个解决方案。

【讨论】：