webentwicklung-frage-antwort-db.com.de

Wie kann ich feststellen, ob die Eingabetaste innerhalb einer DIV mit Jquery gedrückt wurde?

Ich habe das EnterKey-Ereignis auf Dokumentebene folgendermaßen erfolgreich verbunden:

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

Ich kann jedoch das EnterKey-Ereignis für ein Div mit der ID "myDiv" nicht aktivieren.

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

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

Kann man eine EnterKey-Presse in einem Div erkennen? Tatsächlich enthält das Div einige Eingabe-/Auswahlsteuerelemente, mit denen der Inhalt eines Rasters gefiltert wird. Ich möchte das EnterKey-Ereignis einhaken, damit ich das Grid filtern kann, wenn der EnterKey gedrückt wird.

EDIT: Bitte beachten Sie, dass ich Eingaben innerhalb des divs habe (ich habe sie hier absichtlich nicht angezeigt). Ich möchte das Ereignis nicht manuell für jedes der Eingabesteuerelemente innerhalb der Div. Ich gehe auch davon aus, dass, wenn der Benutzer EnterKey drückt, mindestens ein Eingabesteuerelement den Fokus hat.

21
Baig

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

34
Amit

Ein DOM-Element kann Schlüsselereignisse nur empfangen, wenn es focus hat.

Setzen Sie entweder den Fokus auf Ihre div im onready-Handler:

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

Oder geben Sie Ihrem Element den Fokus durch das Attribut tabindex .

EDIT: Wie @roasted erklärt, können Sie auch eine CSS-Regel auf Ihre div setzen, um Probleme bei der Neugestaltung zu vermeiden:

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

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

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

Wichtig ist hier die Verwendung von event.preventDefault() . Wenn Sie es nicht verwenden, kann es durch Drücken der Eingabetaste zum Abschicken des Formulars kommen, das Sie hier offensichtlich nicht möchten. Sie möchten nur die Eingabetaste drücken, um den Inhalt eines Rasters zu filtern. Sobald Sie die Eingabetaste drücken, können Sie die Werte von den Eingabeelementen abrufen und das Raster entsprechend filtern.

3
palaѕн

Sie können zuerst den Submit-Button 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!');
  }
});
1

Ihre Frage könnte präziser sein: Sie möchten das KeyPressed-Ereignis in einem Eingabeobjekt erkennen, das mit bestimmten div verschachtelt ist. Vielleicht könnten Sie es versuchen:

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

Sie können den Fokus zuerst auf das div setzen:

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

Dann verwenden Sie Ihren Code, es wird funktionieren.

0
Vishal

Die Eingabetaste wird hauptsächlich gedrückt, um etwas einzugeben oder zu senden. Sie haben eine Schaltfläche oder ein Textfeld in der Div-Box, das hervorgehoben ist, und drücken Sie die Eingabetaste. 

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

sie möchten, dass der Event-Handler eine bestimmte Eingabe/Schaltfläche enthält (wie beispielsweise eine Schaltfläche zum Filtern).

0
Daniel Ruf