养生 装修 购物 美食 感冒 便秘 营销 加盟 小吃 火锅 管理 创业 搭配 减肥 培训 旅游

js文本框获取设置文本内容光标位置

时间:2024-10-31 21:27:46

js设置光标在文本框input或textarea富文本(多行文本框)中的内容的下标位置操作,主要包括获取,设置。

工具/原料

电脑

HTML编辑工具(txt文本也可以),谷歌浏览器

方法/步骤

1、第一步:打开HTML编辑工具编辑获取文本对象框中的代码:<!DOCTYPEhtml争犸禀淫><html><head><metacha鸡堕樱陨rset="UTF-8"><title>js操作input文本框中光标位置</title><script>//获取当前文本框中,下标所在的位置下标从0开始functiontest1(){varobj=document.getElementById("test");alert(getCursortPosition(obj));}/***获取当前光标位置*@paramctrl*@returns{number}*/functiongetCursortPosition(element){varCaretPos=0;if(document.selection){//支持IEelement.focus();varSel=document.selection.createRange();Sel.moveStart('character',-element.value.length);CaretPos=Sel.text.length;}elseif(element.selectionStart||element.selectionStart=='0')//支持firefoxCaretPos=element.selectionStart;return(CaretPos);}</script></head><body><inputtype="text"value="0123456789"id="test"/><buttononclick="test()">测试</button><p>输入过程中console.log(当前光标位置),鼠标弹起console.log(光标向前移动一位)</p></body></html>

js文本框获取设置文本内容光标位置

2、第二步:测试获取input文本框中光标所在内容的位置。使用谷歌打开页面将光标放入文本框中3,4,5的位置分别得到其所在的文本光标位置。

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

3、第三步:打开编辑工具编辑设置光标在文本框中内容位置的代码。<!DOCTYPEhtm盟敢势袂l><html>稆糨孝汶;<head><metacharset="UTF-8"><title>js操作input文本框中光标位置</title><script>//设置文本框中光标的位置functiontest(){varobj=document.getElementById("test");varpos=parseInt(document.getElementById("num").value);setCaretPosition(obj,pos);}/***设置光标位置*@paramctrl需要设置对象*@parampos对象中内容的光标的所在位置小标从0开始*/functionsetCaretPosition(element,pos){if(element.setSelectionRange){element.focus();element.setSelectionRange(pos,pos);}elseif(element.createTextRange){varrange=element.createTextRange();range.collapse(true);range.moveEnd('character',pos);range.moveStart('character',pos);range.select();}}</script></head><body>设置下面光标的位置:<inputtype="text"value="1"id="num"/><buttononclick="test()">测试</button><br/><inputtype="text"value="0123456789"id="test"/></body></html>

js文本框获取设置文本内容光标位置

4、第四步:测试设置input文本内容光标位置的代码。如下图打开页面--将鼠标放到文本框对应的位置,然后点击测试获取当前光标所在文本的位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

5、第五步:编辑测试多行文本框获取光标位置的代码:<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>js操作input文本框中光标位置</title><script>//获取当前多行文本框中,下标所在的位置下标从0开始functiontest(){varobj=document.getElementById("test");alert(getCursortPosition(obj));}/***获取当前光标位置*@paramctrl*@returns{number}*/functiongetCursortPosition(element){varCaretPos=0;if(document.selection){//支持IEelement.focus();varSel=document.selection.createRange();Sel.moveStart('character',-element.value.length);CaretPos=Sel.text.length;}elseif(element.selectionStart||element.selectionStart=='0')//支持firefoxCaretPos=element.selectionStart;return(CaretPos);}</script></head><body><textareaid="test">0123456789</textarea><buttononclick="test()">测试</button></body></html>

js文本框获取设置文本内容光标位置

6、第六步:测试内容主要测试了多行文本框3,4的位置。

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

7、第七步:编辑设置多行文本框中的内容的光标位置,编辑代码如下<!DOCTYPEhtm盟敢势袂l><html>稆糨孝汶;<head><metacharset="UTF-8"><title>js操作input文本框中光标位置</title><script>//设置多行文本框中光标的位置functiontest(){varobj=document.getElementById("test");varpos=parseInt(document.getElementById("num").value);setCaretPosition(obj,pos);}/***设置光标位置*@paramctrl需要设置对象*@parampos对象中内容的光标的所在位置小标从0开始*/functionsetCaretPosition(element,pos){if(element.setSelectionRange){element.focus();element.setSelectionRange(pos,pos);}elseif(element.createTextRange){varrange=element.createTextRange();range.collapse(true);range.moveEnd('character',pos);range.moveStart('character',pos);range.select();}}</script></head><body>设置下面光标的位置:<inputtype="text"value="1"id="num"/><buttononclick="test()">测试</button><br/><textareaid="test">0123456789</textarea></body></html>

js文本框获取设置文本内容光标位置

8、第八步:测试设置多行文本框中下标所在位置。如下图,设置光标位置的文本框中输入1和6两个框,点击测试框--》可以看到下面文本框光标位置变化。

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

js文本框获取设置文本内容光标位置

© 一点知识