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

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

問題
私が最初に遭遇した問題は、テキスト ボックスを編集領域として使用したいということです。最初はテキストボックスに内容を入力できませんでした。読者は、テキスト ボックスの値はドキュメント内に配置されるまで設定できないという 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 つだけあると仮定します):

コードをコピー

コードは次のとおりです: z.removeChild(document.getElementsByTagName('button')[ 0]); 次に編集を false に設定します: ユーザーは編集を停止します:

コードをコピーします

コードは次のとおりです: edit = false 2 } Event

関数の外側で、ページ全体の onclick イベントを設定します:

コードをコピー

コードは次のとおりです: document.onclick = catchIt; 翻訳アドレス: http://www.quirksmode.org/dom/cms.html

転載する場合は以下の情報を守ってください

著者: Beiyu (tw: @リホーク）