IE11 moves cursor to beginning of input text when editing/focus/tab/onblur on the element

孤者浪人 提交于 2021-01-28 11:20:27

问题


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.

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

I am using react Js as UI framework.

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


回答1:


You will need:

  • 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) - Passing to both the same length will push your cursor to the end of the value without anything being selected.




回答2:


Try to use the value attribute to set the pre-populated values. code like this:

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

The test result as below:

And the IE Browser version as below:



来源:https://stackoverflow.com/questions/52725271/ie11-moves-cursor-to-beginning-of-input-text-when-editing-focus-tab-onblur-on-th

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!