ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript で一般的に使用されるクロスブラウザ操作 範囲オブジェクト_JavaScript スキル

JavaScript で一般的に使用されるクロスブラウザ操作 範囲オブジェクト_JavaScript スキル

PHP中文网
PHP中文网オリジナル
2016-05-16 18:45:101051ブラウズ

最近、オンライン コード エディターを開発する過程で、IE TextRange オブジェクトと標準の Dom Range オブジェクトが使用されることが多くなりました。

開発された関数は主にインスタントコードカラーリング (CodeColoring) と構文ヒント (CodeHints) を含みます。関数開発の問題点は後でまとめられるか、ソースコードが提供されます。
以下は、Range オブジェクトと一般的な操作の個人的な理解の例と概要です:
Range オブジェクト
Range オブジェクトは、ユーザーが選択した領域をドラッグするなど、ドキュメントの連続した範囲領域を表します。ブラウザウィンドウ内でマウスを使用します。
dom 標準 Range オブジェクト
http://www.php.cn/
IE で TextRange オブジェクトを使用する
http://www.php.cn/
一般的に使用される範囲オブジェクトの作成メソッド
開発中の上記のドキュメントの標準確立メソッドに加えて、ほとんどの
標準 DOM は次のように確立されます。 >ie:
var range=document.selection.createRange();
注: 標準 DOM はウィンドウから選択オブジェクトを取得しますが、IE はドキュメント オブジェクトから選択オブジェクトを取得します。
標準の dom range オブジェクト (以下、dom rang と呼びます) と ie の TextRange オブジェクト (以下、TextRange と呼びます) は、動作モードが大きく異なります。 dom range は dom 構造に基づいて制御されていると言えます。 TextRange はテキスト ノード文字セクション コントロールに基づいています。次の例を読むと、これら 2 つの操作モードがよりよく理解できます。以下の範囲オブジェクトは、HTML 構造 (designMode=on contentEditable=true 状態) での選択と変更の操作を指します。テキストエリアでの操作はこれより単純であり、現在の研究環境ではありません。
範囲オブジェクトの具体的なメソッドとプロパティについては、上記の関連する API ドキュメントを確認してください。以下は、実際の開発プロセスでの一般的な関数の説明です。
1. 領域の選択。領域
TextRange の領域選択
TextRange オブジェクトは主に次のメソッドを使用して領域の選択を制御します: moveStart moveEnd move
これら 3 つの関数は同じパラメーター構文を使用します: fn(sUnit [, iCount])
最初のパラメータは、移動の単位を指します。使用されるパラメータ: 文字 (文字)、単語 (単語)、文 (段落)、テキストエディット (編集領域全体)
2 番目のパラメータは、移動の単位を指します。負の数値はその位置の前に移動し、正の数値はその位置に移動します。
実際の開発では文字が一般的に使用されますが、その他のいくつかのパラメータは中国語環境や HTML 編集で想定されている位置から外れます。
例 1: TextRange はカーソルの前の 4 文字を選択します

var rg=document.selection.createRange();

rg.moveStart("character",-4); . select();//テキスト領域を明示的に選択すると、この関数を呼び出さずに選択されたコンテンツを取得できます

var text=rg.text;//選択されたテキストを取得します
var htmlText=rg.htmlText;/ / 選択したテキストの HTML コードを取得します



rg.htmlText を使用して選択したテキストの HTML コードを取得しますが、結果は満足のいくものではありません。

次のようなものです。 b>aaaa bb、aabb セグメントを選択すると、.htmlTex は aabb の代わりに aabb を返します

その他の一般的に使用される位置制御関数:
collapse : マージの前後のポイントを選択します。true は開始点、false は終了点です。
moveToPoint: カーソルを座標に移動します moveToBookmark: ブックマークに移動します。
dom range の領域選択
dom range オブジェクト選択領域は主に dom ノードを座標として使用し、すべての境界移動および領域選択関数は
setEnd() setStart を基準にします。 () は範囲の前後の境界点の位置のコントロール A 関数です。
には 2 つのパラメーターがあり、最初のパラメーターは dom ノード、2 番目のパラメーターはオフセットです。このパラメーターは TextRange とは異なります。 .move、それは dom ノードのオフセットに相対的です。
例: テキスト ノードがあります。node1 ノード値は aaabbbccc、setStart(node1,3) は文字 a と b の間の開始位置を設定します。
次に、例 1 のようにカーソルの前の 4 文字を選択する方法は次のとおりです。 dom range オブジェクトのいくつかの属性を理解する必要があります:
endContainer には、範囲の終点の dom ノードが含まれます。
endOffset endContainer 内のエンドポイントの位置。
startContainer には、範囲の開始点の dom ノードが含まれます。
startOffset startContainer 内の開始点の位置。
例 2: dom range はカーソルの前の 4 文字を選択します

var rg=window.getSelection().getRangeAt(0);
rg.setStart(rg.startContainer,rg.startOffset- 4 );//現在の範囲ストラットのノードとオフセットを取得し、計算後にパラメータとして使用します

//setStartの呼び出し後に明示的に選択されます。これはTextRange

var text=rgとは異なります。 toString();// 選択されたテキストを取得します
rg.collapse(false); // 折りたたみ関数は TextRange.collapse と同じです


例 2 の範囲選択操作は、単一のテキスト コンテンツに適しています。HTML コンテンツの場合、それを正しく取得するには、一般的に、dom range の相対範囲を選択する方が面倒です。の複雑なダム構造。
さらに、dom range が選択されたコンテンツの HTML コードを取得する直接的な方法はありません。 HTML 編集可能状態では、roundContents() メソッドを使用して、span などのタグでコンテンツをラップし、innerHTML を通じてコン​​テンツを取得できます。ただし、選択範囲の境界点が HTML の開始タグと終了タグ内にある場合 (例: as: 123境界点は a タグ内にあります) は例外をスローします。
以下は、例 1 と例 2 のコード、およびテスト用の HTML 編集可能領域を含む、テスト用の完全なコードです。



新しいドキュメント <br></HEAD> <br><SCRIPT LANGUAGE="JavaScript"> function(){ <br>var iframeContent=""; <br>var pChange=false; <br>var $=function(s); document.getElementById(s);} <br>$("ifram_p").innerHTML ='<p id="infoIframe">iframe</p><iframe id="youretextarea" style="height:200px ;width:99%;" class="_editbox"></iframe>'; <br>var fw=$("youretextarea").contentWindow; <br>var f=fw.document; <br>f .designMode = 'オン'; <br>f.contentEditable = true; <br>f.writeln('<html><style>p{margin:0px;padding:0px) ;}body{margin:0px;padding:0px;font:16/18px Arial;}</style><body><b>aaaa</b><u>bbbb</u>cccddd</ body></html>'); <br>f.close(); <br>if(f.attachEvent){ <br>f.attachEvent("onkeyup",fun1); 🎜>fw.addEventListener("keyup",fun1,true); <br>} <br>function fun1(){ <br>if(f.selection){ <br>var rg=f.selection.createRange() ; <br>rg.moveStart("character",-4); <br>//rg.select();//この関数を呼び出さずに選択されたコンテンツを取得できますtext =rg.text;//選択したテキストを取得します<br>var htmlText=rg.htmlText;//選択したテキストのHTMLコードを取得します<br>alert(text); <br>var rg=fw .getSelection().getRangeAt(0); <br>rg.setStart(rg.startContainer,rg.startOffset-4);//現在の範囲ストラットのノードとオフセットを取得し、それらをパラメータとして使用しますCalculation<br>//明示的な選択は setStart の呼び出し後に行われますが、TextRange<br>var text=rg.toString();//選択されたテキストを取得します<br>rg.collapse(false);//collapse関数は TextRange.collapse<br>alert(text) <br>} <br>} <br>//-> <br></SCRIPT> と同じです。 p id="ifram_p"< /p> <br></HTML> <br><br><br><br>2. text <br> <br>TextRange テキストの挿入 <br>TextRang を使用してテキストを挿入するのは、pasteHTML() メソッドを呼び出して HTML コードを直接挿入するだけです。 <br>Dom Range を使用したテキストの挿入<br>Dom Range を使用したテキストの挿入は比較的複雑です。Dom Range オブジェクトは insertNode() メソッドを使用して挿入を実装しますが、insertNode は Range の先頭にノードを挿入します。 document.createTextNode を使用してテキスト ノードを作成すると、テキスト内の HTML タグが自動的に変換されますが、スペースは特殊なケースであり、変換されません。これは、コードのインデントを開発するときに頭痛の種になります。このメソッドはドキュメント内にありませんが、このメソッドは をサポートすることがテストされています。 DocumentFragment オブジェクト <br>。以下はサンプルコードです: <br>例 3: <br>Js コード<br><br><br></p>コードをコピー<p> コードは次のとおりです:<br><br><strong> var rg = window.getSelection().getRangeAt(0); </strong>var flagment = rg.createContextualFragment(str); <br><br><br><br>このコードは挿入テキストを実装していますが、「insertNode は Range の先頭にノードを挿入する」ため、カーソル位置はテキストが挿入される前になります。次に、カーソル制御を実装します。これには Range オブジェクトの位置を設定し、オブジェクトを更新する必要があります。 Selection オブジェクトの範囲 コードは次のとおりです: <br>例 4: <br>Js コード<br><br></p> <p class="codetitle">コードをコピーします<span style="text-decoration:underline;"> コードは次のとおりです:</span></p> <p class="codebody"><br>varselection=window.getSelection(); <br>var rg=selection.getRangeAt(0); <br>var fragment = rg.createContextualFragment(str); ; //DocumentFragment の終了位置を取得します<br>rg.insertNode(fragment); <br>rg.setEndAfter(oLastNode);//終了位置を設定します<br>rg.collapse(false);//結合範囲最後<br>selection.removeAllRanges();// 範囲をクリア <br>selection.addRange(rg);// 範囲を設定 <br><br></p> <p> 以下は、コードインデント機能の例:タブキーを押すと、現在位置にスペースが4つ挿入され、編集中にタブが入力できない問題を解決します。実際のアプリケーションでの機能には、複数行のインデントや自動インデントなどがあります。 <br><br></p> <p class="codetitle">コードをコピー<span style="text-decoration:underline;"> コードは次のとおりです:</span></p> <p class="codebody"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional/ /EN" > <br><HTML> <br><HEAD> <br><TITLE> 新しいドキュメント


< スクリプト言語="JavaScript">
<--
window.onload=function(){
var iframeContent="";
>var pChange =false;
var iframeChange=false;
var $=function(s){return document.getElementById(s);}
$("ifram_p").innerHTML ='

iframe

'; var fw= $("youretextarea").contentWindow;
var f=fw.document;
f.contentEditable = true; ;
f.writeln('