2016-03-23 6 views
0

Ich habe eine Funktion, und ich muss auf klicken oder Drücken der Eingabetaste starten. Also würde ich brauche so etwas wie:Ajax, Javascript - Start-Funktion mit zwei Ereignissen

<BUTTON onclick="searchProduct()" or onkeypress="searchProduct()">Hledat</BUTTON> 

Aber nur auf die Eingabetaste drücken. Nicht auf irgendeinem Schlüssel.

Ist dies für Ajax oder plain Javascript möglich?

OK, hat nicht erwartet, dass es so kompliziert ist, so gebe ich Ihnen meinen ganzen Code, weil Sie Ihre Antworten sind nicht für meinen ganzen Code arbeiten ...

<!DOCTYPE html> 
<HTML> 
    <HEAD> 
     <META charset="UTF-8" /> 
     <TITLE>Searchin engine</TITLE> 
    </HEAD> 
    <BODY> 
     <SCRIPT src="js_search.js"></SCRIPT> 
     <FORM> 
      <INPUT type="text" id="word" size="40" /> 
     </FORM> 
     <BUTTON onclick="searchProduct(document.getElementById('word').value)">Hledat</BUTTON> 
     <P id="display"></P> 

    </BODY> 
</HTML> 
+0

Mögliche Duplikat [keydown + keyup Ereignisse für bestimmte Tasten] (http://stackoverflow.com/questions/16345870/keydown-keyup-events-for-specific-keys) – Marie

+0

Die meisten Browser führen wahrscheinlich onclick, wenn Sie Tab und geben Sie – jayms

+1

ein Button haben keine Schlüsselereignisse – Rajesh

Antwort

2

Fügen Sie einfach Event-Listener in Ihr Javascript (über Ihre searchProduct() Funktion, zum Beispiel)

document.getElementById('button').addEventListener('click', function(){ 
 
    searchProduct(document.getElementById('word').value); 
 
}) 
 

 
document.getElementById('button').addEventListener('keydown', function(e){ 
 
    if(e.keyCode == 13) searchProduct(document.getElementById('word').value); // the keyCode 13 is equivalent to the enter key 
 
}) 
 

 
function searchProduct(val) { 
 
    alert(val); 
 
}
<button id="button">Hledat</button> 
 
<input id="word" value="foo"/>

hoffe, das hilft!

+0

Hallo, es sieht gut aus, aber wie mache ich das, wenn ich mit Variable arbeiten muss? –

+0

Mit Variablen auf welche Weise arbeiten? –

+0

Ich muss den Wert von INPUT mit ID "Wort" nehmen und es in der Funktion searchProduct() bekommen. Aber wenn es kein Element in Element BUTTON gibt, kann ich das nicht tun. –

0

können Sie tun:

<BUTTON onclick="searchProduct()" onkeypress="searchProductKeyPress(event)">Hledat</BUTTON> 

function searchProductKeyPress(event) { 
    if (event.which == 13 || event.keyCode == 13) { 
     searchProduct(); 
     return false; 
    } 
    return true; 
} 
0

In der Funktion können Sie die Veranstaltung wie diese passieren:

<BUTTON onclick="searchProduct(event)" onkeypress="searchProduct(event)">Hledat</BUTTON> 

nun in der Funktion:

searchProduct(e){ 

    if(e.type === 'keypress' && e.keyCode !== 13){ 
     return; 
    }  

    // put the code for search here. 

} 
0

set id = "btn_search_product "zu Ihrer Taste

var btn_search_product = document.getElementById("btn_search_product"); 
btn_search_product.addEventListener("keydown", function (e) { 
    if (e.keyCode === 13) { 
     searchProduct(e); 
    } 
}); 

ich eigentlich evento Bibliothek https://github.com/petermichaux/evento

damit verwenden wäre es:

evento.add(btn_search_product, "keydown", function (e) { 
     if (e.keyCode === 13) { 
      searchProduct(e); 
     } 
}); 
1

Idealerweise sollten Sie auf Element einzelnen Veranstaltungen haben und enter, können Sie entweder bestimmte Funktion aufrufen oder Sie können Elements auslösen klicken.

Wenn Sie möchten, geben Sie und klicken Sie auf die gleiche Schaltfläche klicken, würde ich vorschlagen, Click-Ereignis auszulösen. Dies stellt sicher, dass alle UI-Zustände aktualisiert werden und alle Verarbeitungen ausgeführt werden. Der Grund dafür ist, dass wir mehrere Handler zu einer Taste für unterschiedliche Verarbeitungs- und Anruffunktionen hinzufügen können, die anderen Code möglicherweise nicht aufrufen.

function keyPress(e) { 
 
    if (e.keyCode == 13) { 
 
    document.getElementById("btn").click(); 
 
    } 
 
} 
 

 
function notify() { 
 
    console.log("Processing...") 
 
}
<input type="text" id="txt" onkeyup="keyPress(event)"> 
 
<button id="btn" onclick="notify(event)">Notify</button>

Verwandte Themen