当在元素上进行编辑/焦点/制表符/模糊化时，IE11将光标移动到输入文本的开头 [英] IE11 moves cursor to beginning of input text when editing/focus/tab/onblur on the element

问题描述

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

I am using input type text box with pre populated values and when I click on the input box the position of the cursor is moving to the start which is not happening in other browsers(only IE11 is the issue present). It's very annoying and spent hours debugging . In fact debugging in IE is very pain.

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

Please note I do not want to manipulate the DOM and we are not suppose to use Jquery anymore in our application.

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

I am using react Js as UI framework.

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

It would be great if someone give some hint on this.

推荐答案

您将需要:

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

• A react reference to the input element
• An onFocus event handler on that same input element

一旦有了这两个，就需要将选择范围设置为与初始值相同的长度，就像这样:

Once you've got those two you'd need to set the selection range to the same length of the initial value, like so:

// 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)-传递相同的长度会将光标推到值的末尾而没有任何选择.

setSelectionRange(startRange, endRange) - Passing to both the same length will push your cursor to the end of the value without anything being selected.

这篇关于当在元素上进行编辑/焦点/制表符/模糊化时，IE11将光标移动到输入文本的开头的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！