4

特定のdivの名前を変更する機能があります。私がそれを機能させようとしている方法は次のようなものです：

  • ユーザーの右クリック div
  • ユーザーがコンテキスト メニューの [名前の変更] をクリックする
  • Div は入力要素を取得し、自動的にフォーカスされます
  • Enterキーを押すか、画面をクリックすると、入力が送信されます

ほとんどの手順を完了しましたが、「名前の変更」をクリックした後、入力要素がフォーカスされていません。コードは次のとおりです。

function Rename( ){
    ClickedFile.innerHTML = "<input class='Rename' type='text' value='" + ClickedFile.innerHTML + "'>";
    ClickedFile.childNodes[0].focus();
}

ClickedFile は、右クリックされたノードです。innerHTML の変更は正常に機能しますが、.focus() は機能しません。その理由はわかりません。コンソールでもエラーは発生しません。

私も使ってみました：

ClickedFile.childNodes[0].select();
ClickedFile.childNodes[1].focus();
ClickedFile.focus();

それらのどれも機能していません。

編集：

  • JQuery を使用すると役立つことはわかっていますが、これがうまくいかない理由を知りたいと思っています。

  • 問題を修正しました。イベントハンドラーと関係があります。私の答えは以下に掲載されています。

4

3 に答える 3

4

要素をDOMの一部として追加する必要があります

var input = document.createElement("input");
input.className = "Rename";
input.type = "text";

document.getElementById("somenode").appendChild(input);
input.focus(); // should work now

フィドルを見る

于 2013-05-13T21:35:24.803 に答える
2

その理由は、select メソッドと focus メソッドをすぐに呼び出しているためです。ブラウザーにはまだ要素を挿入する機会がなかったため、要素は DOM の一部ではありません。

手っ取り早い解決策は、setTimeout-function を 0 ミリ秒の値で使用することです。

function Rename( ){
    ClickedFile.innerHTML = "<input class='Rename' type='text' value='" + ClickedFile.innerHTML + "'>";
    setTimeout(function(){ClickedFile.childNodes[0].focus();}, 0);
}

これにより、ブラウザは必要なすべての処理を実行し、渡された関数を実行します。setTimeout

次のフィドルは、動作状態の例を示しています: http://jsfiddle.net/Kennethtruyers/fX8h6/

于 2013-05-13T21:34:45.787 に答える
1

「マウスダウン」ではなく「マウスアップ」でトリガーされるようにdivの名前を変更する関数を変更することで、問題を修正しました。

これが問題を引き起こした理由は、Rename() 関数がマウスダウンでトリガーされ、「マウスダウン」中にフォーカスが設定されたためだと思いますが、コンテキストメニューは「マウスアップ」まで非表示になりませんでした。

それが理由かどうかは確認できませんが、Rename() のトリガーで「mousedown」が「mouseup」に変更された後にコードが機能することはわかっています。

于 2013-05-14T00:42:18.287 に答える