Jquery: Auslösen eines Klickereignisses beim Drücken der Eingabetaste

165

Ich muss ein Tastendruckereignis ausführen, wenn ich die Eingabetaste drücke.

Wie im Moment wird das Ereignis nicht ausgelöst.

Bitte helfen Sie mir wenn möglich mit der Syntax.

$(document).on("click", "input[name='butAssignProd']", function () {
   //all the action
});

Dies ist mein Versuch, ein Klickereignis bei der Eingabe auszulösen.

$("#txtSearchProdAssign").keydown(function (e) {
  if (e.keyCode == 13) {
    $('input[name = butAssignProd]').click();
  }
});

jquery key-events

— Arianule
quelle

Sie können eine return false oder schließen müssene.preventDefault();

— geekchic

4

Als Randnotiz: e.keyCodeist nicht vollständig browserübergreifend. Verwenden Sie e.whichstattdessen.

— Hashem Qolami

4

In diesem Fall sollten Sie keyupanstelle von keypressoder verwenden keydown. keypress/ keydownEreignisse werden kontinuierlich ausgelöst, während die Taste gedrückt wird: jsbin.com/uzoxuk/1/edit

— Hashem Qolami

307

probier das aus ....

$('#txtSearchProdAssign').keypress(function (e) {
 var key = e.which;
 if(key == 13)  // the enter key code
  {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Code-Snippet anzeigen

$(function() {

  $('input[name="butAssignProd"]').click(function() {
    alert('Hello...!');
  });

  //press enter on text area..

  $('#txtSearchProdAssign').keypress(function(e) {
    var key = e.which;
    if (key == 13) // the enter key code
    {
      $('input[name = butAssignProd]').click();
      return false;
    }
  });

});

<!DOCTYPE html>
<html>

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
  <meta charset=utf-8 />
  <title>JS Bin</title>
</head>

<body>
  <textarea id="txtSearchProdAssign"></textarea>
  <input type="text" name="butAssignProd" placeholder="click here">
</body>

</html>

Erweitern Sie das Snippet

Finden Sie Demo in jsbin.com

— Vijay
quelle

3

Falls Benutzer den "Enter" -Tastendruck von irgendwoher erkennen möchten, können Sie das $ ('# txtSearchProdAssign') ersetzen und das Dokument $ (document) .keypress auslösen .......

— dave4jr

Sieht aus Sicht der Barrierefreiheit fragwürdig aus. Funktioniert dies definitiv für alle Arten von Geräten mit unterschiedlichen "Auswahl" -Methoden?

— Jonny

26

Versuche dies

$('#twitterSearch').keydown(function(event){ 
    var keyCode = (event.keyCode ? event.keyCode : event.which);   
    if (keyCode == 13) {
        $('#startSearch').trigger('click');
    }
});

Hoffe es hilft dir

— Neeraj Dubey
quelle

4

Meinten Sie if((event.keyCode || event.which) == 13)? Ja, es ist vollständig Cross-Browser, der die TabEingabe von FF unterstützt.

— Hashem Qolami

Gemäß der API , event.keyCodeist überflüssig, nur nutzen event.which.

— Konyak

12

$('#txtSearchProdAssign').keypress(function (e) {
  if (e.which == 13) {
    $('input[name = butAssignProd]').click();
    return false;  
  }
});

Ich habe auch gerade das Senden eines Formulars auf "Enter" gefunden, das die meisten Probleme umfassend abdeckt.

— geekchisch
quelle

8

Du warst fast da. Hier ist, was Sie versuchen können.

$(function(){
  $("#txtSearchProdAssign").keyup(function (e) {
    if (e.which == 13) {
      $('input[name="butAssignProd"]').trigger('click');
    }
  });
});

Ich habe verwendet trigger(), um click auszuführen und es an das keyupEreignis zu binden, das ausgelöst wurde, keydownweil das clickEreignis aus zwei Ereignissen besteht, dh mousedowndann mouseup. Also mit keydownund so ähnlich wie möglich aussehen keyup.

Hier ist eine Demo

— Rohit416
quelle

4

Eine weitere Ergänzung zu machen:

Wenn Sie eine Eingabe dynamisch hinzufügen, z. B. mit append(), müssen Sie die on()Funktion jQuery verwenden.

$('#parent').on('keydown', '#input', function (e) {
    var key = e.which;
    if(key == 13) {
        alert("enter");
        $('#button').click();
        return false;
    }
});

AKTUALISIEREN:

Ein noch effizienterer Weg, dies zu tun, wäre die Verwendung einer switch-Anweisung. Vielleicht finden Sie es auch sauberer.

Markup:

<div class="my-form">
  <input id="my-input" type="text">
</div>

jQuery:

$('.my-form').on('keydown', '#my-input', function (e) {
  var key = e.which;
  switch (key) {
  case 13: // enter
    alert('Enter key pressed.');
    break;
  default:
    break;
  }
});

— Daniel Dewhurst
quelle

1

IMO, das eine switch-Anweisung für eine einzelne Bedingung verwendet, ist übertrieben.

— Nyuszika7h

Es ist jedoch effizienter als eine if-Anweisung.

— Daniel Dewhurst

2

Ich glaube dir nicht Können Sie eine Quelle zitieren?

— Rolf

3

Versuchen Sie, einen Klick auf eine Schaltfläche nachzuahmen, wenn Sie die Eingabetaste drücken? In diesem Fall müssen Sie möglicherweise die triggerSyntax verwenden.

Versuchen Sie es zu ändern

$('input[name = butAssignProd]').click();

zu

$('input[name = butAssignProd]').trigger("click");

Wenn dies nicht das Problem ist, werfen Sie einen zweiten Blick auf die Syntax der Tastenerfassung, indem Sie sich die Lösungen in diesem Beitrag ansehen: jQuery Event Keypress: Welche Taste wurde gedrückt?

— Shaun
quelle

Von api.jquery.com/click - Diese Methode ist eine Verknüpfung für .on ("click", Handler) in den ersten beiden Variationen und .trigger ("click") in der dritten. das würde also genau das gleiche tun.

— Kapsel

1

Versuche dies

<button class="click_on_enterkey" type="button" onclick="return false;">
<script>
$('.click_on_enterkey').on('keyup',function(event){
  if(event.keyCode == 13){
    $(this).click();
  }
});
<script>

— Vishnu Prasad
quelle

1

Sie können diesen Code verwenden

$(document).keypress(function(event){
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if(keycode == '13'){
       alert('You pressed a ENTER key.');
    }
});

— Sandeep Kumar
quelle

1

Fügen Sie einfach die Funktion präventDefault () in den Code ein.

$("#txtSearchProdAssign").keydown(function (e) 
{
   if (e.keyCode == 13) 
   {
       e.preventDefault();
       $('input[name = butAssignProd]').click();
   }
});

— Arron
quelle

0

Jquery: Fire Button click event Verwenden der Eingabetaste Drücken Sie try this ::

tabindex = "0" onkeypress = "return EnterEvent (event)"

 <!--Enter Event Script-->
    <script type="text/javascript">
        function EnterEvent(e) {
            if (e.keyCode == 13) {
                __doPostBack('<%=btnSave.UniqueID%>', "");
            }
        }
    </script>
    <!--Enter Event Script-->

— JIYAUL MUSTAPHA
quelle

0

     $('#Search').keyup(function(e)
        {
            if (event.keyCode === 13) {
            e.preventDefault();
            var searchtext = $('#Search').val();
            window.location.href = "searchData.php?Search=" + searchtext + '&bit=1';
            }
        });

Erweitern Sie das Snippet

— Supriya
quelle

-4

Dies scheint jetzt das Standardverhalten zu sein, daher reicht es aus, Folgendes zu tun:

$("#press-enter").on("click", function(){alert("You `clicked' or 'Entered' me!")})

Sie können es in dieser JSFiddle versuchen

Getestet auf: Chrome 56.0 und Firefox (Dev Edition) 54.0a2, beide mit jQuery 2.2.x und 3.x.

— xDaizu
quelle

2

Dies scheint überhaupt keine "Rückkehr" -Presse zu erwischen.

— Klokop

@klokop Du liegst falsch, dies fängt eine 'Rückkehr' oder 'Eingabe' ab. Ich habe es gerade selbst mit jQuery 3 unter FF 63, Chrome 69, Safari 10.0.1 und Opera 55 versucht, sowohl über deren Link als auch auf einer separaten Site, die ich erstellt habe, um dies selbst zu testen. Das ist eine +1 von mir.

— Hyperum

Wenn Sie eine Schaltfläche verwenden, werden durch Eingabe Schaltflächen und <a> -Tags ausgelöst. In einem bestimmten Zeitraum oder wenn OP ein reguläres Eingabefeld hat, ist dies nicht der Fall.

— Nickfmc