JavaScript DOM学習第2章テキスト編集_基礎知識-jsチュートリアル-php.cn

JavaScript DOM学習第2章テキスト編集_基礎知識

WBOY

リリース： 2016-05-16 18:34:28

オリジナル

1061 人が閲覧しました

例
このページは例です。段落をクリックして編集し、[準備完了] をクリックします。変更内容が表示されます。

問題
私が最初に遭遇した問題は、テキストボックスを編集領域として使用したいということです。最初はテキストボックスに内容を入力できませんでした。読者は、テキストボックスの値はドキュメント内に配置されるまで設定できないという Mozilla の警告を発見しました。
さらに、Mozilla でのコンテンツのパッケージ化はあまり良くありません。いくつかのラップパラメータを試しましたが、結果はあまり良くありませんでした。
最も深刻な問題は、変更されたコンテンツをサーバーに送り返すことであり、これはほぼすべての CMS システムが実行しなければならないことです。読者の皆さんは私にたくさんの賢明なアドバイスをくれました。ただし、JavaScript経由ではできないため、解決策を提供することができません。したがって、方法を見つけたというメールは私に送らないでください。それはうまくいくかもしれませんが、サーバーサイドのコードを必要としない純粋な JavaScript の方法が必要なだけです。

スクリプト

コードをコピーコードは次のとおりです:

 
var 編集= false; 

if (document.getElementById && document.createElement) { 
 var butt = document.createElement('BUTTON'); 
 var buttext = document.createTextNode('準備完了!') ; 
 butt.appendChild(buttext); 
 butt.onclick = saveEdit; 

function catchIt(e) { 
 if (編集中) 
 if ( !document.getElementById || !document.createElement) return; 
 if (!e) var obj = e.target; = 1) { 
 obj = obj.parentNode; 
 } 
 if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return; nodeName != 'P' && obj.nodeName != 'HTML') { 
 obj = obj.parentNode; 
 } 
 if (obj.nodeName == 'HTML') return; x = obj .innerHTML; 
 var y = document.createElement('TEXTAREA'); 
 z.insertBefore(y,obj); butt,obj ); 
 y.value = x; 
 編集 = true; function saveEdit( ) { 
 var area = document.getElementsByTagName('TEXTAREA')[0]; 
 var y = document.createElement('P'); 
 var z = area.parentNode; > y. innerHTML = エリア.値; 
 z.removeChild(エリア); 
 z.removeChild(document.getElementsByTagName('ボタン') ; 
 Editing = false; 
} 

document.onclick = catchIt; 
説明
編集フラグを false に設定します。これは、ユーザーが段落を編集しているかどうかを示すために使用されます。もちろん最初は何もありません。 

var edit=false; 

ボタンの作成 
次に、後で何度も必要になる Radey ボタンを作成します。これには高度なスクリプト スキルが必要なので、最初にオブジェクト検出を実行します。 





コードをコピーします 

コードは次のとおりです。

if (document.getElementById && document.createElement) {

最新のブラウザの場合は、ボタンを作成します:

コードをコピーコードは次のとおりです: var butt = document.createElement('BUTTON');

テキストは次のとおりです:

コードをコピーコードは次のとおりです。 var buttext = document.createTextNode('Ready!');

このテキストを入力しますボタンに追加します:

コードをコピーしますコードは次のとおりです。 butt.appendChild(buttext);
次に、onclick イベントハンドラーを追加します。

コードをコピーしますコードは次のとおりです:

butt .onclick = saveEdit; 2 }

これで、ボタンがボタンに保存され、必要なときに直接参照できるようになります。

P をテキストボックスに変換
後で、ページ全体の onclick イベントを定義します。これらのイベントはすべて catchIt() 関数に送信されます。

コードをコピーコードは次のとおりです。

function catchIt(e){

まず、ユーザーが段落を正常に編集しているかどうかを確認し、正常に編集している場合は、関数を終了します:

コードをコピーコードは次のとおりです:

if (編集中) return;

その後、サポートチェック:

コードをコピーコードは次のとおりです。

 if (!document.getElementById || !document.createElement) return;イベントのソースを探します: 

コードをコピーコードは次のとおりです: if (!e) var obj = window.event.srcElement; 2 else var obj = e.target;

これでイベントのソースが得られましたが、問題は、Mozilla がテキスト ノードを次のように認識することです。ソース (必要な P ノードの代わりに)。したがって、ノードがラベルではない (nodeType が 1 ではない) 場合は、DOM ツリーを上方向にたどる必要があります: 

コードをコピーコードは次のとおりです: while (obj.nodeType != 1) { 2 obj = obj.parentNode; 3 }

最後にラベルを付けます。これがテキスト ボックスのラベルの場合、ユーザーはクリックした後に編集できます。リンク ラベルの場合は、ユーザーがクリックした後もリンクとして反映される必要があります。これら 2 つのケースでは、この関数は必要ありません: 

コードをコピーコードは次のとおりです: if (obj.tagName == 'TEXTAREA' || obj.tagName == 'A') return;

P タグまたは HTML タグが見つかるまで、DOM ツリーを再度上にたどる必要があります。 

コードをコピーコードは次のとおりです: while (obj.nodeName != 'P ' && obj.nodeName ! = 'HTML') { 2 obj = obj.parentNode; 3 }

これが HTML タグの場合、ユーザーが段落の外側をクリックしたことを意味し、関数は終了します。 🎜>

コードをコピーコードは次のとおりです: if (obj.nodeName == 'HTML' ) return;

この検出後、最後に、ユーザーが編集したい段落をクリックしていることを確認します。次に、段落の innerHTML を保存します:

コードをコピーしますコードは次のとおりです: var x = obj.innerHTML ;

新しい TEXTAREA を作成して保存します:

コードをコピーしますコードは次のとおりです: var y = document.createElement('TEXTAREA');

次に、段落の親ノードを見つけます:

コードをコピーしますコードは次のとおりです。 var z = obj.parentNode

これで次のようになります:

            z
            |
  ---------------------------------------
  |    |      |      |   |
 [more] y(TEXTAREA) butt(BUTTON) P  [more]

ログイン後にコピー

その後、段落を削除します。テキストボックスとボタンが前の段落に置き換わったように見えます。

これまでは、テキストボックスを挿入した後、テキストボックス内に段落の innerHTML を配置できました。 Mozilla は、挿入前のテキストボックスへのコンテンツの追加をサポートしていません。

	y.value = x;

ログイン後にコピー

ユーザーの便宜のためにテキストボックスにフォーカスを置きます:

	y.focus();

ログイン後にコピー

次に、編集を true に設定します。

	editing = true;
}

ログイン後にコピー

テキストボックスを P に変換します。
ユーザーが [準備完了] ボタンをクリックすると、その逆になるはずです。これは、saveEdit() 関数によって行われます。
function saveEdit() {Get TEXTAREA (ここではページ全体に TEXTAREA が 1 つだけあると仮定します):
var area = document.getElementsByTagName('TEXTAREA')[0] 新しい段落を作成して保存します:

コードをコピーしますコードは次のとおりです。

var y = document.createElement('P'); >

テキストを検索します。ボックスの親要素: 新しい段落をそこに追加する必要があります:

コードをコピーしますコードは次のとおりです:

var z = area.parentNode;

テキストボックスの値を新しい段落に保存します:

コードをコピーコードは次のとおりです:

y.innerHTML = area.value;

次に、テキストボックスの前に新しい段落を挿入します。 🎜>

コードをコピーコードは次のとおりです。 z.insertBefore(y,area); 🎜>テキストボックスの削除:

コードをコピー

コードは次のとおりです: z.removeChild(area) ; 準備完了ボタンを削除します (同様に、ページにボタンが 1 つだけあると仮定します):