选择文本,范围

范围

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

 

 

posted @ 2014-01-04 14:17  三剑客  阅读(382)  评论(0编辑  收藏  举报