What is a cursor? Introduction to cursor movement in input or textarea

The content of this article is about what is a cursor? The introduction to cursor movement in input or textarea has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

What is a cursor

The flashing cursor in the input box on the page is actually a selection, that is, the selection directly formed by the left and right boundaries of the selection.

Non-IE browser

The input box node input=document.getElementById('#input') has two attributes: selectionStart and selectionEnd, which respectively represent the starting position and the end position of the selection.

By modifying these two values, a selection can be formed. The width is 0, which realizes the position control and acquisition of the cursor.

IE browser

IE browser provides richer APIs:
createTextRange(), document.selection.createRange(), moveStart(), moveEnd(), move() ,collapse(),text,select().

Step one:

var range = input.createTextRange();        //创建一个文本选区对象。

Step two: Some operations

range.collapse(boolean);

You can pass in a Boolean value as a parameter. The default value of the parameter is true, indicating left or right Right compression

range.moveStart(param1,param2);

The optional values ​​of the first parameter include character, word, sentence, and textedit. For example, character means offset based on characters. The second parameter represents the offset, and positive and negative represent the direction.

range.moveEnd(param1,param2);

The same method parameters as above, the difference is that this is used to move the end boundary

Step 3:

range.select();  //将range包含的区域选中。

It should be noted that: before calling range. Before the select() method, the content of the selection object will not be added with the selection effect.

Supplement:

var range = document.selection.createRange();

This method creates a selection object based on the selected text area in the current page. This selection The difference between the object and the selection object of the createTextRange method is that its selection range is the area of ​​the selected text on the page, that is, its left and right boundaries are no longer the default left minimum and right maximum.

range.move(param1,param2);

Same as the moveStart parameter, it is more friendly to moving the cursor.

Related recommendations:

JS insert text at the TextArea cursor position and move the cursor to the end of the text_javascript skills

jQuery clicks on the input to move the cursor to the last or specified position

The above is the detailed content of What is a cursor? Introduction to cursor movement in input or textarea. For more information, please follow other related articles on the PHP Chinese website!