1

マウスが TD 要素に入るとテキスト入力を表示し、離れると非表示にする必要があります。したがって、この入力 (フォーカス) をクリックすると、マウスイベントのバインドが解除されます.入力で Enter キーを押したときに、標準アクションを mouseenter と mouseleave にバインドするには、何を書く必要がありますか?

$(".translation").mouseenter(function(){
            $(this).html('<input type="text" class="tr_input" placeholder="Перевести...">');


            $(".tr_input").focus(function(){
                $(".translation").unbind("mouseenter");
                $(".translation").unbind("mouseleave");
            });

        });

        $(".translation").mouseleave(function(){
            $(this).html("");
        });
4

1 に答える 1

0

毎回入力を再作成する代わりに、一度 (おそらく HTML で直接) 作成できると思いますが、display:none. マウスが に入るとtd、そこにあるものをすべて非表示にして、入力を表示します。

次に、マウスが入力を離れると、それを再び非表示にして、以前にあったものを表示します (もしあれば)。この方法では、その場で要素をバインドおよびバインド解除する必要はありません。

更新：あなたの質問を誤解したと思います。他の誰かがイベント ハンドラーを適切にバインドおよびバインド解除する方法を知っているかもしれませんが (私は知りません)、問題の解決に役立つかもしれません。私の理解が正しければ、テーブルの内容を編集するのと同じようなことをしようとしているのではないでしょうか? (スプレッドシートのように)

したがって、上記の私の提案は引き続き適用されますが、ユーザーが入力をクリックした後にこれらのハンドラーが実行されないようにする必要があります。一度に 1 つの要素のみがフォーカスされるため、lock変数を作成し、ユーザーが編集している間はそれを true に設定できます。

var lock = false;
$("input").click(function() { lock = true; });

そして、各ハンドラーを実行する前にテストします。

$(".translation").mouseenter(function(){
    if ( lock )
        return;

ユーザーが Enter キーを押すと (または入力がフォーカスを失うと)、lock = false再度設定して、同じコードを実行できますmouseleave(ユーザーが編集中にマウスが既に離れている可能性があるため)。

jsFiddleの完全な動作例。それが役に立てば幸い！

于 2012-01-21T00:11:45.720 に答える