Question

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

以下是一个简化示例：

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 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的部分：）

Answer 2

此问题可以通过以下方法解决：

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

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

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

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

如果您使用的是ReactJS，则here是该解决方案。

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

2 个答案: