Home > Web Front-end > JS Tutorial > body text

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

不言
Release: 2018-09-14 14:46:18
Original
3291 people have browsed it

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();        //创建一个文本选区对象。
Copy after login

Step two: Some operations

range.collapse(boolean);
Copy after login

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);
Copy after login

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);
Copy after login

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

Step 3:

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

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();
Copy after login

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);
Copy after login

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!