Wie erfasst man das Drücken der Eingabetaste? [duplicate]

Auf meiner HTML-Seite hatte ich ein Textfeld, in das der Benutzer ein Schlüsselwort für die Suche eingeben konnte. Wenn sie auf die Suchschaltfläche klicken, generiert die JavaScript-Funktion eine URL und wird in einem neuen Fenster ausgeführt.

Die JavaScript-Funktion funktioniert ordnungsgemäß, wenn der Benutzer mit der Maus auf die Suchschaltfläche klickt, es erfolgt jedoch keine Reaktion, wenn der Benutzer die EINGABETASTE drückt.

function searching(){
    var keywordsStr = document.getElementById('keywords').value;
    var cmd ="http://XXX/advancedsearch_result.asp?language=ENG&+"+ encodeURI(keywordsStr) + "&x=11&y=4";
    window.location = cmd;
}

<form name="form1" method="get">
    <input name="keywords" type="text" id="keywords" size="50" >
    <input type="submit" name="btn_search" id="btn_search" value="Search" 
        onClick="javascript:searching(); return false;" onKeyPress="javascript:searching(); return false;">
    <input type="reset" name="btn_reset" id="btn_reset" value="Reset">
</form>

Formularansatz

Wie scoota269 sagt, sollten Sie verwenden onSubmit Stattdessen löst das Drücken der Eingabetaste in einem Textfeld höchstwahrscheinlich die Übermittlung eines Formulars aus (wenn es sich innerhalb eines Formulars befindet).

<form action="#" onsubmit="handle">
    <input type="text" name="txt" />
</form>

<script>
    function handle(e){
        e.preventDefault(); // Otherwise the form will be submitted

        alert("FORM WAS SUBMITTED");
    }
</script>

Textbox-Ansatz

Wenn Sie ein Ereignis im Eingabefeld haben möchten, müssen Sie sicherstellen, dass Ihr Ereignis angezeigt wird handle() gibt false zurück, andernfalls wird das Formular gesendet.

<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

<script>
    function handle(e){
        if(e.keyCode === 13){
            e.preventDefault(); // Ensure it is only this code that runs

            alert("Enter was pressed was presses");
        }
    }
</script>

Verwenden onkeypress . Überprüfen Sie, ob die gedrückte Taste eingegeben wurde (keyCode = 13). Wenn ja, rufen Sie an searching() Funktion.

HTML

<input name="keywords" type="text" id="keywords" size="50"  onkeypress="handleKeyPress(event)">

JAVASCRIPT

function handleKeyPress(e){
 var key=e.keyCode || e.which;
  if (key==13){
     searching();
  }
}

Hier ist ein Ausschnitt, der es in Aktion zeigt:

document.getElementById("msg1").innerHTML = "Default";
function handle(e){
 document.getElementById("msg1").innerHTML = "Trigger";
 var key=e.keyCode || e.which;
  if (key==13){
     document.getElementById("msg1").innerHTML = "HELLO!";
  }
}

<input type="text" name="box22" value="please" onkeypress="handle(event)"/>
<div id="msg1"></div>

Verwenden event.key anstatt event.keyCode!

function onEvent(event) {
    if (event.key === "Enter") {
        // Submit form
    }
};

Mozilla-Dokumente

Unterstützte Browser

Versuche dies….

HTML inline

onKeydown="Javascript: if (event.keyCode==13) fnsearch();"
or
onkeypress="Javascript: if (event.keyCode==13) fnsearch();"

JavaScript

<script>
function fnsearch()
{
   alert('you press enter');
}
</script>

Sie können Javascript verwenden

ctl.attachEvent('onkeydown', function(event) {

        try {
            if (event.keyCode == 13) {
                FieldValueChanged(ctl.id, ctl.value);
            }
            false;
        } catch (e) { };
        return true
    })

Ein bisschen generisches jQuery für Sie.

$('div.search-box input[type=text]').on('keydown', function (e) {
    if (e.which == 13) {
        $(this).parent().find('input[type=submit]').trigger('click');
        return false;
     }
});

Dies funktioniert unter der Voraussetzung, dass das Textfeld und die Schaltfläche „Senden“ im selben Div eingeschlossen sind. Funktioniert hervorragend mit mehreren Suchfeldern auf einer Seite

Sie müssen einen Handler dafür erstellen onkeypress Aktion.

HTML

<input name="keywords" type="text" id="keywords" size="50" onkeypress="handleEnter(this, event)" />

JS

function handleEnter(inField, e)
{
    var charCode;

    //Get key code (support for all browsers)
    if(e && e.which)
    {
        charCode = e.which;
    }
    else if(window.event)
    {
        e = window.event;
        charCode = e.keyCode;
    }

    if(charCode == 13)
    {
       //Call your submit function
    }
}