最近看突然看到相關內容，准備收集一下跨瀏覽器的相關操作。
設置選中的狀態。
- function SelectRange(obj,begin,end)
- {
- if(obj.createTextRange) {
- var rng = obj.createTextRange();
- rng.moveStart("character",-0);
- rng.moveEnd("character",-0);
- rng.collapse(true);
- rng.moveStart("character",begin);
- rng.moveEnd("character",end-begin);
- rng.select();
- }
- if(obj.setSelectionRange){
- obj.setSelectionRange(begin, end);
- }
- }
相關知識：
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"> </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/