当前位置：首页 → 问答吧 → js设置光标选中text中指定文字（js高级）

js设置光标选中text中指定文字（js高级）

时间：2010-05-07

来源：互联网

我只找了一个，可以设置光标位置的，但是要选中，比如setSelectText(text对象,开始位置,结束位置)就不知道怎么弄了？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script type="text/javascript"> var setCursorPos = function(el, pos){ if(el.createTextRange){ var rng = el.createTextRange(); //新建textRange对象 rng.moveStart('character', pos); //更改rng对象的开始位置 rng.collapse(true); //光标移动到范围结尾 rng.select();//选中 el.focus(); }else if(el.setSelectionRange){ el.focus(); //先聚集 el.setSelectionRange( pos , pos ); //设光标 } } </script> </head> <body> <input type="text" id="aaa" value="abcdefghijk123456789"/><input type="button" value="test" onclick="setCursorPos(document.getElementById('aaa'),10);"/> </body> </html>
提示：您可以先修改部分代码再运行

作者: michaelzhouh 发布时间: 2010-05-07

不知道是不是这个意思？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <textarea id="o"></textarea> <input type="button" value="aaaa" onclick="setSelectText(document.getElementById('o'),3,5)" /> <script> function setSelectText(el,start,end){ if(el.createTextRange){ var Range=el.createTextRange(); Range.collapse(); Range.moveEnd('character',end); Range.moveStart('character',start); Range.select(); } if(el.setSelectionRange){ el.focus(); el.setSelectionRange(start,end); //设光标 } } </script> </body> </html>
提示：您可以先修改部分代码再运行

作者: sBai 发布时间: 2010-05-07

就是这个帅哥，太感谢了。。。是否能再给个FF版本的？

作者: michaelzhouh 发布时间: 2010-05-07

貌似兼容FF呀~~

作者: sBai 发布时间: 2010-05-07

看错了，呵呵，谢谢了，帅哥，非常感谢。就那个
collapse，moveEnd，moveStart
先后顺序还有点糊涂，郁闷，IE真恼火。

作者: michaelzhouh 发布时间: 2010-05-07

平常我们看到的光标只有一竖，可以看作是首末合并的样子。
collapse先把光标重合。collapse(true)在前一个光标处重合,collapse(false)在后一个光标处重合.
moveEnd移动后一个光标
moveStart移动前一个光标

作者: sBai 发布时间: 2010-05-07

帅哥，谢谢你了，我在网上看到另外一个collapse解释，说true是光标移动到开头，false是光标移动到结尾？？？和你的解释不一样呢？

另外你说的：
moveEnd移动后一个光标
moveStart移动前一个光标

明明是操作2个不同的光标，那为什么2行代码交换后，结果就不同了？
moveEnd放后面的时候，第二参数变成了，选取长度了，不是索引了？

作者: michaelzhouh 发布时间: 2010-05-07

COLLAPSE，意思差不多吧。

moveEnd和moveStart交换后，moveEnd是以moveStart为基准的

作者: sBai 发布时间: 2010-05-07