选择文本,范围
范围
DOM2
document.createRange();
range.selectNode(node) range.selectNodeContents(node) //outeHTML,innerHTML的区别
更精细控制:
1.setStartBefore(relNode)
2.setStartAfter(relNode)
3.setEndBefore(relNode)
4.setEndAfter(relNode)
5.setStart(relNode,偏移值) //relNode为container,偏移值为跳过的字符或者子节点index
6.setEnd(reNode,偏移值)
操作方法
1.deleteContents()//删除
2.extractContents()//删除,但会返回删除范围的文档片段
3.insertNode(node) //向范围开始处插入节点
4.surroundContents(node) //范围用node环绕(包含)起来
5.collapse(true/false) // true折叠到起点,false折叠到末尾 可通过collapsed属性知道状态
6.compareBoundaryPoints() //比较两个范围的 起点,终点 那个前,那个后 详细p278
7.cloneRange()//复制一个一样的范围,并且修改这个范围不会影响文档
8.detach() //清理范围,解除对范围的引用
IE中的范围
通过body,button,input,textarea这几个元素的createTextRange()方法创建
document.body.createTextRange //推荐,因为通过元素创建的范围只能在相应元素中使用,所以body就可以在所有元素上使用了
1.findText(txt,direction) //可多次执行,范围围绕第一次出现的给定文本,第二参为方向,返回true or false
2.text属性,htmlText属性
3.moveToElementText() //选择该元素的所有文本 与selectNode相似
4.move() //会先将范围折叠
5.moveStart() //移动范围的起点
6.moveEnd() //移动范围的终点
//这上三个方法都接受两参数,移动单位,移动数量 单位有:'charactor','word','sentence','textedit'
7.expand() //接受一个参数 单位,将范围规范化,规范为完整的单位
操作方法
1.pasteHTML('html') //html替换范围
2.collapse(true/false) //折叠到起点或者终点,通过boundingWidth==0判断是否折叠
3.compareEndPoints() //比较范围 p281
4.isEqual(range)// 判断两范围是否相等
5.duplicate() //复制范围
选择文本
1)输入框全部文本
非IE :textbox.selectionStart,textbox.selectionEnd
IE: document.selection.createRange().text /*选择的文本*/
2)输入框部分文本
非IE: textbox.setSelectionRange(start,end)
IE:
var range=textbox.createTextRange();
range.collapse();
range.moveStart(start);
range.moveEnd(end);
range.select();
textbox.focus();
/*有些浏览器在没有焦点的情况下不会显示选中的文本,最好在最后获取焦点*/
实例:JS控制在光标处插入任意字符
step1:textbox.focus() //才能保证所有浏览器都能取到 textbox的select的数据
step2:获取光标位置pos 非IE textbox.selectionStart ,IE :
var range = document.selection.createRange();
range.moveStart ('character', -textbox.value.length);//确保start移到了0,new range的文本就是开始至光标处了
range.value.length
step3:从新拼字符串 (0,pos)+yourchar+(pos,end)
获取设置光标位置jquery扩展http://www.oschina.net/code/snippet_4873_3395
只适用于用户点击文本的情况下,如果是点击其他按钮,这里IE下获取光标位置的方式不对
我的改进版http://www.cnblogs.com/chengzhenping/p/3517896.html