IE11 在元素上编辑/聚焦/制表符/onblur 时将光标移动到输入文本的开头答案

【问题标题】：IE11 moves cursor to beginning of input text when editing/focus/tab/onblur on the elementIE11 在元素上编辑/聚焦/制表符/onblur 时将光标移动到输入文本的开头
【发布时间】：2018-10-09 16:13:52
【问题描述】：

我正在使用带有预填充值的输入类型文本框，当我单击输入框时，光标的位置正在移动到其他浏览器中不会发生的开头（只有 IE11 存在问题）。这很烦人，花了几个小时调试。其实在 IE 中调试是很痛苦的。

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

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

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

【问题讨论】：

标签： input textbox cursor internet-explorer-11 cursor-position

【解决方案1】：

你需要：

对输入元素的反应引用
同一输入元素上的 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) - 传递相同的长度会将光标推到值的末尾，而不会选择任何内容。

【讨论】：

@Jereme 如果您使 startRange 长度数字短于结尾，是否会选择文本？传递给 setSelectionRange 的值是值的长度。

【解决方案2】：

尝试使用 value 属性来设置预填充的值。代码如下：

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

测试结果如下：

IE浏览器版本如下：

【讨论】：