Rumah > hujung hadapan web > tutorial js > 什么是光标?input或textarea中关于光标的移动介绍

什么是光标?input或textarea中关于光标的移动介绍

不言
Lepaskan: 2018-09-14 14:46:18
asal
3348 orang telah melayarinya

本篇文章给大家带来的内容是关于什么是光标?input或textarea中关于光标的移动介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

什么是光标

页面上输入框中闪烁的光标其实是一个选区,也就是选区的左边界和右边界直接形成的选区。

非IE浏览器

输入框结点input=document.getElementById('#input')有二个属性:  selectionStart、selectionEnd,分别代表选区开始位置,选区结束位置。

通过修改这二个值就可以形成选区,宽度为0也就实现了光标的位置控制和获取。

IE浏览器

IE浏览器提供的API更加丰富:
createTextRange()、 document.selection.createRange()、moveStart() 、moveEnd() 、move() 、collapse() 、text 、select()。

第一步:

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

第二步:一些操作

range.collapse(boolean);
Salin selepas log masuk

可以传入一个布尔值作为参数,参数默认值为true,指示向左还是向右压缩

range.moveStart(param1,param2);
Salin selepas log masuk

第一个参数可选值有 character、word、sentence、textedit. 比如character,即根据字符来偏移。第二个参数代表偏移的多少,正负表示方向。

range.moveEnd(param1,param2);
Salin selepas log masuk

和上面那个方法参数一样,不同的是这是用来移动结束边界

第三步:

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

需要注意的是:在调用range.select()方法之前,选区对象的内容并不会被添加选中效果

补充:

var range = document.selection.createRange();
Salin selepas log masuk

这个方法根据当前页面中的选中文字区域来创建一个选区对象,这个选区对象与createTextRange方法的到选区对象的区别在于,它的选区范围为页面选中文字的区域,即它的左右边界不再是默认的左最小右最大。

range.move(param1,param2);
Salin selepas log masuk

和moveStart参数一样,对于移动光标比较友好。

相关推荐:

JS在TextArea光标位置插入文字并实现移动光标到文字末尾_javascript技巧

jQuery点击input使光标移动到最后或指定位置

Atas ialah kandungan terperinci 什么是光标?input或textarea中关于光标的移动介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan