document.selection.createRange()

document.selection.createRange()  

2009-12-25 14:07:35|  分类: Technical|字号 订阅

 
 

最近看突然看到相关内容,准备收集一下跨浏览器的相关操作。

 

设置选中的状态。

  1. function SelectRange(obj,begin,end)   
  2. {   
  3.     if(obj.createTextRange) {   
  4.         var rng = obj.createTextRange();   
  5.         rng.moveStart("character",-0);   
  6.         rng.moveEnd("character",-0);   
  7.         rng.collapse(true);   
  8.         rng.moveStart("character",begin);   
  9.         rng.moveEnd("character",end-begin);   
  10.         rng.select();   
  11.     }   
  12.     if(obj.setSelectionRange){             
  13.         obj.setSelectionRange(begin, end);   
  14.     }      
  15. }   

 

相关知识:

setSelectionRange

document.selection  IE/Opera支持 Firefox/Safari/Chrome不支持

createRange()  IE/Opera支持 Firefox/Safari/Chrome不支持

createTextRange()  IE支持 Firefox/Safari/Chrome/Opera不支持

window.getSelection()  Firefox/Safari/Chrome/Opera支持 IE不支持

 

<style>
h2{color:red;font-family:Arial;background:#990000;padding:5px;color:#fff;  }
</style>
<body>
<div>123
    <p>456
         <span>789
                <b>bbbbb</b>
         </span>
    </p>
</div>
<hr/>
<button onclick="getParent()">察看选中的路径</button>
<h2 id="show">&nbsp;</h2>
</body>
<script>
function getParent(){
 var o,path = [];
 o = document.all? document.selection.createRange().parentElement(): window.getSelection().focusNode.parentNode;
 do{
  path.push(o.tagName);
  
 }while(o=o.parentNode,o&&o!==document.body)
 alert(path.reverse().join('->'))
};
</script>

 

function getSelectText()
{
if(isIE)
{
alert(frameDoc.selection.createRange().text);
}
else
{
alert(frameWin.getSelection().getRangeAt(0));
}
}

 

<script language="javascript"> 
var editor; 
editor = document.getElementById("HtmlEdit").contentWindow; 
//只需键入以下设定,iframe立刻变成编辑器。 
editor.document.designMode = 'On'; 
editor.document.contentEditable = true; 
//但是IE与FireFox有点不同,为了兼容FireFox,所以必须创建一个新的document。 
editor.document.open(); 
editor.document.writeln('<html><body></body></html>'); 
editor.document.close(); 
//字体特效 - 加粗方法一 
function addBold() 

editor.focus(); 
//所有字体特效只是使用execComman()就能完成。 
editor.document.execCommand("Bold", false, null); 

//字体特效 - 加粗方法二 
function addBold() 

editor.focus(); 
//获得选取的焦点 
var sel = editor.document.selection.createRange(); 
insertHTML("<b>"+sel.text+"</b>"); 

function insertHTML(html) 

if (editor.document.selection.type.toLowerCase() != "none") 

editor.document.selection.clear() ; 

editor.document.selection.createRange().pasteHTML(html) ; 

</script> 

 摘自于:http://blog.163.com/wr_asdf/blog/static/42930451200911252735453/

posted @ 2013-01-30 13:55  Journey31  阅读(4339)  评论(0编辑  收藏  举报