在元素上进行编辑/焦点/制表符/模糊化时，IE11将光标移动到输入文本的开头

Question

我正在使用具有预先填充的值的输入类型文本框，当我单击输入框时，光标的位置移到开始，这在其他浏览器中是没有发生的（仅出现IE11）。 这很烦人，花了数小时进行调试。实际上，在IE中进行调试非常痛苦。

请注意，我不想操纵DOM，并且我们不应该再在应用程序中使用Jquery。

我正在使用react Js作为UI框架。

如果有人对此提供一些提示，那就太好了。

Answer 1

尝试使用value属性设置预填充值。 像这样的代码：

<input type="text" id="txtinput" value="default value" />

测试结果如下：

以及以下IE浏览器版本：

Answer 2

您将需要：

• 对输入元素的反应引用
• 同一输入元素上的onFocus事件处理程序

一旦有了这两个，就需要将选择范围设置为与初始值相同的长度，如下所示：

// either
const inputRef = useRef();
// or
const inputRef = React.createRef()

const onFocus = () => {
  inputRef.current.setSelectionRange(value, value);
}

<input ref={inputRef} value={value} onFocus={onFocus}/>

setSelectionRange(startRange, endRange)-传递相同的长度会将光标推到值的末尾而没有选择任何内容。