javascript Range對(duì)象跨瀏覽器常用操作
2.插入文本
TextRange插入文本
使用TextRang插入文本比較簡(jiǎn)單,直接調(diào)用pasteHTML()方法就可以直接插入html代碼。
Dom Range插入文本
使用Dom Range插入文本相對(duì)復(fù)雜一些,Dom Range對(duì)象使用insertNode()方法實(shí)現(xiàn)插入,但是insertNode是在Range的開(kāi)始位置插入一 個(gè)節(jié)點(diǎn),參數(shù)是一個(gè)節(jié)點(diǎn)而不是字符串,我們可以通過(guò)插入文本節(jié)點(diǎn)實(shí)現(xiàn),如果使用document.createTextNode建立文本節(jié)點(diǎn),文本中的HTML標(biāo)記會(huì)自動(dòng)轉(zhuǎn)換,但空格是個(gè)特例,并不會(huì)自動(dòng)轉(zhuǎn)換為 ,這使我在開(kāi)發(fā)代碼縮進(jìn)時(shí)很頭疼,最后解決的辦法,是使用Rang.createContextualFragment,這個(gè)方法雖然在文檔中沒(méi)有找到,但測(cè)試多個(gè)瀏覽器都支持此方法,此方法返回的是一個(gè)DocumentFragment對(duì)
象。以下是示例代碼:
例3:
Js代碼
var rg = window.getSelection().getRangeAt(0);
var fragment = rg.createContextualFragment(str);
rg.insertNode(fragment);
這段代碼雖然實(shí)現(xiàn)插入了文本,但是光標(biāo)位置卻在插入文本之前,因?yàn)椤癷nsertNode是在Range的開(kāi)始位置插入一 個(gè)節(jié)點(diǎn)”,接下來(lái)我們實(shí)現(xiàn)光標(biāo)的控制,這需要設(shè)置Range對(duì)象的位置,并更新Selection對(duì)象的Range,代碼如下:
例4:
Js代碼
var selection=window.getSelection();
var rg=selection.getRangeAt(0);
var fragment = rg.createContextualFragment(str);
var oLastNode = fragment.lastChild; //獲得DocumentFragment的末尾位置
rg.insertNode(fragment);
rg.setEndAfter(oLastNode);//設(shè)置末尾位置
rg.collapse(false);//合并范圍至末尾
selection.removeAllRanges();//清除range
selection.addRange(rg);//設(shè)置range
以下是一個(gè)代碼縮進(jìn)功能的部分代碼作為示例:按tab鍵時(shí)會(huì)在當(dāng)前位置,插入4個(gè)空格,解決在編輯時(shí)不能輸入tab的問(wèn)題。實(shí)際應(yīng)用中的功能包括多行縮進(jìn)和自動(dòng)縮進(jìn)。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
window.onload=function(){
var iframeContent="";
var divContent="";
var divChange=false;
var iframeChange=false;
var $=function(s){return document.getElementById(s);}
$("ifram_div").innerHTML+='<div id="infoIframe">iframe</div><iframe id="youretextarea" style="height:200px;width:99%;" class="_editbox"></iframe>';
var fw=$("youretextarea").contentWindow;
var f=fw.document;
f.designMode = 'On';
f.contentEditable = true;
f.open();
f.writeln('<html><style>p{margin:0px;padding:0px;}body{margin:0px;padding:0px;font:16/18px Arial;}</html>');
f.close();
if(f.attachEvent){
f.attachEvent("onkeydown",fun1);
}else{
fw.addEventListener("keydown",fun1,true);
}
function fun1(e){
ee=e||window.event;
var code=e.charCode||e.keyCode;
var strTab=" ";
if(code==9){//tab鍵
if(f.selection){//ie
e.returnValue=false;//取消瀏覽器默認(rèn)動(dòng)作 ie
var rg=f.selection.createRange();
rg.pasteHTML(strTab);
}else{
e.preventDefault();//取消瀏覽器默認(rèn)動(dòng)作
var selection=fw.getSelection();
var rg=selection.getRangeAt(0);
var fragment = rg.createContextualFragment(strTab);
var oLastNode = fragment.lastChild; //獲得DocumentFragment的末尾位置
rg.insertNode(fragment);
rg.setEndAfter(oLastNode);//設(shè)置末尾位置
rg.collapse(false);//合并范圍至末尾
selection.removeAllRanges();//清除range
selection.addRange(rg);//設(shè)置range
}
}
}
}
//-->
</SCRIPT>
<div id="ifram_div"></div>
</BODY>
</HTML>
3.替換
綜合介紹的選擇和插入的方法可完成替換功能,TextRange比較簡(jiǎn)單pasteHTML方法會(huì)替換原來(lái)Range選中的文本,Dom Range的insertNode不會(huì)刪除原range選中內(nèi)容,需要調(diào)用deleteContents()方法先刪除選擇內(nèi)容。
以上介紹了使用Range對(duì)象常用的區(qū)域選擇、插入文本和替換操作,希望在大家開(kāi)發(fā)在線(xiàn)編輯器時(shí)有所幫助,粗略之處還請(qǐng)見(jiàn)諒。
- JavaScript實(shí)戰(zhàn)(原生range和自定義特效)簡(jiǎn)單實(shí)例
- JavaScript中textRange對(duì)象使用方法小結(jié)
- JS Range HTML文檔/文字內(nèi)容選中、庫(kù)及應(yīng)用介紹
- js createRange與createTextRange的一些用法實(shí)例
- Prototype使用指南之range.js
- JS效率個(gè)人經(jīng)驗(yàn)談(8-15更新),加入range技巧
- Javascript標(biāo)準(zhǔn)DOM Range操作全集
- JavaScript使用Range調(diào)色及透明度實(shí)例
相關(guān)文章
JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用示例
這篇文章主要介紹了JS實(shí)現(xiàn)圖片旋轉(zhuǎn)動(dòng)畫(huà)效果封裝與使用,結(jié)合實(shí)例形式分析了JavaScript實(shí)現(xiàn)圖片元素旋轉(zhuǎn)的相關(guān)功能代碼的封裝與使用操作技巧,需要的朋友可以參考下2018-07-07javascript中閉包c(diǎn)losure的深入講解
這篇文章主要給大家介紹了關(guān)于javascript中閉包c(diǎn)losure的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開(kāi)
用javascript實(shí)現(xiàn)點(diǎn)擊鏈接彈出"圖片另存為"而不是直接打開(kāi)...2007-08-08echarts設(shè)置暫無(wú)數(shù)據(jù)方法實(shí)例及遇到的問(wèn)題
Echarts是百度旗下的一款開(kāi)源的商業(yè)級(jí)數(shù)據(jù)可視化產(chǎn)品,具有豐富的圖表類(lèi)型,下面這篇文章主要給大家介紹了關(guān)于echarts設(shè)置暫無(wú)數(shù)據(jù)方法及遇到的問(wèn)題的相關(guān)資料,需要的朋友可以參考下2022-12-12js跨域和ajax 跨域問(wèn)題的實(shí)現(xiàn)思路
大家都知道js是不能跨域的,但我們有時(shí)候就要這么用,怎么辦呢?辦法總是有的.2009-09-09javascript和HTML5利用canvas構(gòu)建猜牌游戲?qū)崿F(xiàn)算法
讓我猜猜你心中的牌,先隨機(jī)生成27張牌,不能重復(fù)列出三列牌,然后記住其中一張,然后點(diǎn)擊牌所在的列,多次就可以猜出你想的牌,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-07-07基于openlayers4實(shí)現(xiàn)點(diǎn)的擴(kuò)散效果
這篇文章主要為大家詳細(xì)介紹了基于openlayers4實(shí)現(xiàn)點(diǎn)的擴(kuò)散效果 ,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-01-01layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼
今天小編就為大家分享一篇layui(1.0.9)文件上傳upload,前后端的實(shí)例代碼,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09