web-dev-qa-db-ja.com

jqueryを使用してDIV内でEnterキーが押されたかどうかを検出する方法は？

次のように、ドキュメントレベルでEnterKeyイベントを正常にフックしました。

    $(document).keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });

しかし、「myDiv」というIDを持つDivでEnterKeyイベントをフックできません。

<div id="myDiv"></div>

$("#myDiv").keypress(function (e) {
     if (e.which == 13) {
         alert('You pressed enter!');
     } 
 });

Div内でEnterKeyが押されたことを検出することはできますか？実際、Divには、グリッドのコンテンツをフィルタリングするために使用される入力/選択コントロールが含まれています。 EnterKeyイベントをフックして、EnterKeyが押されたときにグリッドをフィルタリングできるようにします。

編集： div内に入力があることに注意してください（ここでは意図的に表示していません）。 Div内の各入力コントロールのイベントを手動でフックしたくありません。また、ユーザーがEnterKeyを押すと、少なくとも1つの入力コントロールにフォーカスがあると想定しています。

jquerykeypress
22
Baig

これを試して

 <div id="Div1">
    <input type ="text" id="aa"/>
    sdfsd hsjdhsj shdj shd sj
 </div>

JQuery

$(function(){
 $("#Div1 input").keypress(function (e) {
    if (e.keyCode == 13) {
        alert('You pressed enter!');
    }
 });
});

デモ

34
Amit

DOM要素がキーイベントを受け取ることができる唯一の方法は、彼がfocusを持っている場合です。

divハンドラーでonreadyにフォーカスを設定します：

$(function() {
   $('#mydiv').focus();
});

または、 tabindex attribute を使用して要素にフォーカスを与えます。

EDIT：@roastedが説明したように、CSSルールをdivに設定して、スタイル変更の問題を回避することもできます。

#myDiv {
  outline: 0 solid;
}
4
Halim Qarroum

ここで本当に必要なのは、keypressイベントを、div内のinput、select、textareaなどのすべてのフォーム要素にバインドすることです。

_$("#myDiv input, select, textarea").keypress(function (event) {
    if (event.which == 13) {
        event.preventDefault();
        alert('You pressed enter!');
    }
});
_

ここで注意すべき主なことは、 event.preventDefault() の使用です。使用しない場合は、Enterキーを押すとフォームが送信される可能性があるため、明らかにここでは不要です。 Enterキーを押すだけで、グリッドのコンテンツをフィルタリングできます。したがって、Enterキーを押すとすぐに、入力要素から値を取得し、それに応じてグリッドをフィルター処理できます。

3
palaѕн

最初に送信ボタンまたはタグにフォーカスしてからクリックすることができます

  $('#id of input button').focus();

または

 $('input[type="submit"]').focus();

次に、Enterキーを押します

 $("#inputid").keypress(function (e) {
   if (e.which == 13) {
    alert('You pressed enter!');
  }
});
1
Samuel Kwame Antwi

あなたの質問はより正確になる可能性があります-特定のdivでネストされた入力オブジェクトでKeyPressedイベントを検出したい場合。たぶんあなたは試すことができます：

$("#myDiv input,select").keypress(function (e) {
        if (e.which == 13) {
            alert('You pressed enter!');
        }
    });
1
Kamil T

最初にdivにフォーカスを設定できます：

window.location.hash = '#name of div';

次に、使用するコードを使用します。

0
Vishal

Enterキーは主に何かを入力するか送信するために押されます。強調表示されているdiv内にボタンまたはテキストボックスがあり、Enterキーを押します。

0
Bharadwaj
$("#inputid").keypress(function (e) {
    if (e.which == 13) {
        alert('You pressed enter!');
    }
});

イベントハンドラーを特定の入力/ボタン（「フィルター」ボタンなど）にバインドする場合

0
Daniel Ruf