erkennen, ob Werteingabe ausgewählt über drücken Sie die Eingabetaste nicht Onclick

Question

ich einen Input-Tag

haben

<input type="text" name="cOperator" class="form-control scale-input operator" placeholder="Enter your ID" autocomplete="off" onkeyup="ajax_showOptions(this,'getEmp',event)" required> 

Also, wenn ich eingeben beginnen, zeigt es Mitarbeiterliste. Und ich habe eine jQuery-Funktion, die Click-Ereignis behandelt.

$(document).on("click",".optionDivSelected, .optionDiv", function() { 
    if($('.operator').val().length > 0){ 
     $('.operator-li').next().addClass('active'); 
     $('.operator-li').find('span').addClass('hidden'); 
     $('.operator-value').show(); 
     $('.operator-value h1 span').html($('.operator').val()); 
     $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn(); 
    } 
}); 

Funktion prüft den Wert des Eingangs, verbirgt sich ein Eingang, zeigt ausgewählte Wert in einem div und bringt zum nächsten Schritt automatisch (Ich habe keinen nächsten Button haben). Dieser Teil funktioniert perfekt. Problem ist: Der Benutzer kann einfach mit der Registerkarte navigieren, mit den Pfeiltasten nach unten oder oben auswählen und mit der Eingabetaste auswählen. Ich habe einen ausgewählten Wert in der Eingabe, aber es bringt mich nicht zum nächsten Schritt, weil das Click-Ereignis nicht ausgelöst wurde. Ich habe versucht, so etwas wie unten zu tun:

$(document).on("click, keypress",".optionDivSelected, .optionDiv", function() {console.log('someone used keyboard')}); 

aber kein Glück. (Ich weiß nicht, ob es sogar möglich ist, mehrere Event-Handler zu haben)

Wie erkenne ich, wenn Benutzer eingegeben Wert mit Enter-Taste drücken und meine Mitarbeiter danach. es schafft auch ein Problem, wenn ich die Eingabe onchange validiere. Eingabe möchte getippt werden nicht nur per Klick eingegeben oder Enter-Taste drücken.

Bitte helfen Sie mir dabei.

Ich kann den ganzen Code nicht zeigen. weil es viele Backend-Mitarbeiter hat. Ich schließe Schritte ein, die ich erreichen möchte.

ich Eingabe beginnen, und ich sehe eine Liste:

ich eine Option klicken und ich bewege mich zum nächsten Schritt:

Aber wenn ich wählen, indem Sie Enter drücken (oder Rückkehr) Ich sehe nur Eingabe-Tag mit ausgewählter Option, keine div mit ausgewählten Operator, kein nächster Schritt. Genau wie unten:

Update:

Unten ist mein Problem zu umgehen und ist keine Frage: in Kombination von Aswin Ramesh Kommentar, alpeshandya und Antwort des Vikash Mishra kam ich mit Dieser Code und es tut, was ich erwartet habe. und die Antwort der meisten alpeshandya hat mir geholfen. Danke Jungs. Und BTW Wenn Sie sehen, dass ich den Code irgendwie bin spagettiing, mich PLS wissen lassen. :-)

 var ajaxHandler = function(){ 
    // $(document).on("click",".optionDivSelected, .optionDiv", function() { 
     if($('.operator').val().length > 0){ 
      $('.operator-li').next().addClass('active'); 
      $('.operator-li').find('span').addClass('hidden'); 
      $('.operator-value').show(); 
      $('.operator-value h1 span').html($('.operator').val()); 
      $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn(); 
     } 
    // }); 
    console.log('ajaxhandler') 
}; 

$(document).on("click",".optionDivSelected, .optionDiv", ajaxHandler) 
$('.operator').on('keyup', function(event) { 
    if(event.which == 13) { 
      console.log("enter"); 
      event.preventDefault(); 
      ajaxHandler(); 
     } 
}); 

Answer 1

Sie eine generische Event-Handler-Funktion erstellen müssen, die als Handler als auch für Klick verwendet werden können, wie für den Tastendruck. Dies sollte für Ihre usecase arbeiten:

var eventHandler=function(){ 
 
\t if($('.operator').val().length > 0){ 
 
     $('.operator-li').next().addClass('active'); 
 
     $('.operator-li').find('span').addClass('hidden'); 
 
     $('.operator-value').show(); 
 
     $('.operator-value h1 span').html($('.operator').val()); 
 
     $('.operator').parents('label').hide().parents('.fieldset').next().fadeIn(); 
 
    } \t 
 
} 
 

 
$(document).on("click",".optionDivSelected, .optionDiv", eventHandler) 
 
$(document).on("keypress",".optionDivSelected, .optionDiv", function(event){ 
 
\t if(event.which == 13) { 
 
      eventHandler(); 
 
     } 
 
})

Hier ist Plunker für Demo. demo