Wie kann man mit jquery erkennen, ob die Eingabetaste innerhalb eines DIV gedrückt wurde?

Lesezeit: 3 Minuten

Benutzer-Avatar
Baig

Ich habe das EnterKey-Ereignis auf Dokumentebene wie folgt erfolgreich verknüpft:

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

Aber ich bin nicht in der Lage, das EnterKey-Ereignis auf einem Div mit der ID “myDiv” zu verknüpfen.

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

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

Ist es möglich, einen EnterKey-Druck innerhalb eines Div zu erkennen? Tatsächlich enthält das Div einige Eingabe-/Auswahlsteuerelemente, die zum Filtern des Inhalts eines Grids verwendet werden. Ich möchte das EnterKey-Ereignis verknüpfen, damit ich das Grid filtern kann, wenn die EnterKey-Taste gedrückt wird.

BEARBEITEN:
Bitte beachten Sie, dass ich Eingaben innerhalb des div habe (ich habe sie hier absichtlich nicht gezeigt). Ich möchte das Ereignis nicht manuell für jedes der Eingabesteuerelemente innerhalb des Div verknüpfen. Außerdem gehe ich davon aus, dass mindestens ein Eingabesteuerelement den Fokus haben muss, wenn der Benutzer die Eingabetaste drückt.

  • Wie senden Sie einen Tastendruck an ein div? Ich meine, wie testest du das?

    – Halim Qarroum

    29. Mai 2013 um 11:00 Uhr


  • der Tastendruck kann nur global auf $(Fenster) und Formulareingaben erkannt werden.

    – Daniel Ruf

    29. Mai 2013 um 11:02 Uhr

Versuche dies

 <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!');
    }
 });
});

Demo

Benutzer-Avatar
Halim Qarroum

Die einzige Möglichkeit, wie ein DOM-Element Schlüsselereignisse empfangen kann, ist, wenn es die hat Fokus.

Setzen Sie entweder den Fokus auf Ihre div in dem onready Handler:

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

Oder geben Sie Ihrem Element durch die den Fokus tabindex-Attribut.

BEARBEITEN : Wie @roasted erklärt hat, können Sie auch eine CSS-Regel für Ihre festlegen div Um Restyling-Probleme zu vermeiden:

#myDiv {
  outline: 0 solid;
}

  • aber es wird sehr leicht den Fokus verlieren 😉

    – Daniel Ruf

    29. Mai 2013 um 11:08 Uhr

  • könnte zusätzlich css: #myDiv{outline:0} verwenden, um eine aktive Elementumgestaltung zu vermeiden

    – A. Wolff

    29. Mai 2013 um 11:09 Uhr


  • Sicher, aber er wird zumindest Ereignisse empfangen können. Aus diesem Grund werden Schlüsselereignisse normalerweise von Eingabeelementen behandelt.

    – Halim Qarroum

    29. Mai 2013 um 11:09 Uhr

Was Sie hier wirklich tun müssen, ist das Keypress-Ereignis an alle Formularelemente wie input, select und textarea innerhalb des div zu binden:

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

Das Wichtigste, was hier zu beachten ist, ist die Verwendung von event.preventDefault(). Denn wenn Sie es nicht verwenden, kann das Drücken der Eingabetaste dazu führen, dass das Formular gesendet wird, was Sie hier offensichtlich nicht möchten. Sie möchten nur die Eingabetaste drücken, um den Inhalt eines Rasters zu filtern. Sobald also die Eingabetaste gedrückt wird, können Sie die Werte aus den Eingabeelementen abrufen und das Raster entsprechend filtern.

Ihre Frage könnte präziser sein – Sie möchten das KeyPressed-Ereignis für ein Eingabeobjekt erkennen, das in einem bestimmten div verschachtelt ist. Vielleicht könntest du versuchen:

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

Sie können zuerst die Senden-Schaltfläche oder ein Tag fokussieren und dann darauf klicken

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

oder

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

drücken Sie dann die Eingabetaste

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

Benutzer-Avatar
Bharadwaj

Die Eingabetaste wird hauptsächlich gedrückt, um etwas einzugeben oder zu senden. Haben Sie eine Schaltfläche oder ein Textfeld innerhalb des div, das hervorgehoben ist, und drücken Sie dann die Eingabetaste.

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

Sie möchten den Ereignishandler an eine bestimmte Eingabe / Schaltfläche binden (wie eine “Filter” -Schaltfläche)

  • Verwenden Sie in diesem Fall lieber $(“#inputid”) als $(“#myDiv #inputid”). Die ID ist für jedes Element auf der Seite eindeutig, es ist nicht erforderlich, das übergeordnete Element im Selektor anzugeben.

    – Kamil T

    29. Mai 2013 um 11:08 Uhr

1051840cookie-checkWie kann man mit jquery erkennen, ob die Eingabetaste innerhalb eines DIV gedrückt wurde?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy