Attivare un clic del pulsante con JavaScript sul tasto Invio in una casella di testo

Ho un input di testo e un pulsante (vedi sotto). Come posso utilizzare JavaScript per triggersre l’evento click del pulsante quando il tasto Invio viene premuto all’interno della casella di testo?

C’è già un pulsante di invio diverso nella mia pagina corrente, quindi non posso semplicemente rendere il pulsante un pulsante di invio. E, voglio solo il tasto Invio per fare clic su questo pulsante specifico se viene premuto all’interno di questa casella di testo, nient’altro.

  

In jQuery, il seguente potrebbe funzionare:

 $("#id_of_textbox").keyup(function(event) { if (event.keyCode === 13) { $("#id_of_button").click(); } }); 
 $("#pw").keyup(function(event) { if (event.keyCode === 13) { $("#myButton").click(); } }); $("#myButton").click(function() { alert("Button code executed."); }); 
  Username:
Password: 

Quindi basta codificarlo!

   

Capito questo:

    

Rendi il pulsante un elemento di invio, quindi sarà automatico.

  

Nota che avrai bisogno di un elemento

contenente i campi di input per fare in modo che funzioni (grazie a Sergey Ilinsky).

Non è una buona pratica ridefinire il comportamento standard, il tasto Invio deve sempre chiamare il pulsante di invio su un modulo.

Poiché nessuno ha ancora utilizzato addEventListener , ecco la mia versione. Dati gli elementi:

   

Vorrei usare il seguente:

 var go = document.getElementById("go"); var txt = document.getElementById("txt"); txt.addEventListener("keypress", function(event) { event.preventDefault(); if (event.keyCode == 13) go.click(); }); 

Ciò ti consente di modificare separatamente il tipo di evento e l’azione mantenendo pulito l’HTML.

Nota che probabilmente vale la pena assicurarsi che questo sia al di fuori di un

perché quando ho inserito questi elementi in essi premendo Invio, ho inviato il modulo e ricaricato la pagina. Mi ci sono voluti alcuni spiccioli da scoprire.

Addendum : grazie ad un commento di @ruffin, ho aggiunto il gestore di eventi mancante e un impedimento predefinito per consentire a questo codice di funzionare (presumibilmente) anche all’interno di un modulo. (Andrò in giro per testare questo, a quel punto rimuoverò il contenuto tra parentesi).

In semplice JavaScript,

 if (document.layers) { document.captureEvents(Event.KEYDOWN); } document.onkeydown = function (evt) { var keyCode = evt ? (evt.which ? evt.which : evt.keyCode) : event.keyCode; if (keyCode == 13) { // For Enter. // Your function here. } if (keyCode == 27) { // For Escape. // Your function here. } else { return true; } }; 

Ho notato che la risposta è stata data solo in jQuery, quindi ho pensato di dare qualcosa anche in JavaScript.

Un trucco base che puoi usare per questo che non ho visto completamente menzionato. Se si desidera eseguire un’azione Ajax o altri lavori su Invio ma non si desidera inviare effettivamente un modulo, è ansible farlo:

 

Impostazione action = “javascript: void (0);” come questo è una scorciatoia per prevenire essenzialmente il comportamento predefinito. In questo caso viene chiamato un metodo sia che tu premi invio o clic sul pulsante e venga effettuata una chiamata ajax per caricare alcuni dati.

Provalo:

    

Per triggersre una ricerca ogni volta che si preme il tasto Invio, utilizzare questo:

 $(document).keypress(function(event) { var keycode = (event.keyCode ? event.keyCode : event.which); if (keycode == '13') { $('#btnSearch').click(); } } 
 onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};" 

Questa è solo una cosa che ho da un progetto un po ‘recente … L’ho trovato in rete, e non ho idea se ci sia un modo migliore o meno nel semplice vecchio JavaScript.

Sebbene, sono abbastanza sicuro che finché c’è un solo campo nel modulo e un pulsante di invio, premere invio deve inviare il modulo, anche se c’è un altro modulo nella pagina.

È quindi ansible acquisire il modulo onsubmit con js e fare qualsiasi convalida o callback che si desidera.

Nessuno ha notato la “chiave di accesso” di html che è disponibile da un po ‘.

Questo non è un modo javascript per gli abbreviazioni da tastiera.

accesskey_browsers

La chiave di accesso attribuisce scorciatoie su MDN

Intento per essere usato in questo modo. L’attributo html stesso è sufficiente, in ogni caso possiamo cambiare il segnaposto o un altro indicatore a seconda del browser e del sistema operativo. La sceneggiatura è un metodo scratch non sperimentato per dare un’idea. Potresti voler utilizzare un rilevatore di librerie di browser come il minuscolo bowser

 let client = navigator.userAgent.toLowerCase(); isLinux = client.indexOf("linux") > -1; isWin = client.indexOf("windows") > -1; isMac = client.indexOf("apple") > -1; isFirefox = client.indexOf("firefox") > -1; isWebkit = client.indexOf("webkit") > -1; isOpera = client.indexOf("opera") > -1; input = document.getElementById('guestInput'); if(isFirefox) { input.setAttribute("placeholder", "Access keys: ALT+SHIFT+Z"); } else if (isWin) { input.setAttribute("placeholder", "Access keys: ALT+Z"); } else if (isMac) { input.setAttribute("placeholder", "Access keys: CTRL+ALT+Z"); } else if (isOpera) { input.setAttribute("placeholder", "Shortcut: SHIFT+ESCAPE->Z"); } else {'Point me to operate...'} 
  

Questa è una soluzione per tutti gli amanti della YUI :

 Y.on('keydown', function() { if(event.keyCode == 13){ Y.one("#id_of_button").simulate("click"); } }, '#id_of_textbox'); 

In questo caso speciale ho ottenuto risultati migliori usando YUI per l’triggerszione di oggetti DOM che sono stati iniettati con la funzionalità dei pulsanti – ma questa è un’altra storia …

Questo tentativo di onchange è vicino, ma si comporta male per quanto riguarda il browser indietro e poi in avanti (su Safari 4.0.5 e Firefox 3.6.3), quindi alla fine non lo consiglierei.

   

In Angular2 :

 (keyup.enter)="doSomething()" 

Se non si desidera avere un riscontro visivo nel pulsante, è buona norma non fare riferimento al pulsante, ma invocare direttamente il controller.

Inoltre, l’ID non è necessario, un altro modo NG2 di separare tra la vista e il modello.

 event.returnValue = false 

Usalo quando gestisci l’evento o nella funzione che il tuo gestore di eventi chiama.

Funziona in Internet Explorer e Opera almeno.

Per jquery mobile dovevo farlo

 $('#id_of_textbox').live("keyup", function(event) { if(event.keyCode == '13'){ $('#id_of_button').click(); } }); 

Nel caso in cui si desideri distriggersre anche il pulsante Invio da Posting al server ed eseguire lo script Js.

   

Per aggiungere una soluzione JavaScript completamente semplice che ha risolto il problema di @ icedwater con l’invio di moduli , ecco una soluzione completa con form .

NOTA: Questo è per “browser moderni”, incluso IE9 +. La versione IE8 non è molto più complicata e può essere appresa qui .


Fiddle: https://jsfiddle.net/rufwork/gm6h25th/1/

HTML

  

JavaScript

 // The document.addEventListener replicates $(document).ready() for // modern browsers (including IE9+), and is slightly more robust than `onload`. // More here: https://stackoverflow.com/a/21814964/1028230 document.addEventListener("DOMContentLoaded", function() { var go = document.getElementById("go"), txt = document.getElementById("txt"), outige = document.getElementById("outige"); // Note that jQuery handles "empty" selections "for free". // Since we're plain JavaScripting it, we need to make sure this DOM exists first. if (txt && go) { txt.addEventListener("keypress", function (e) { if (event.keyCode === 13) { go.click(); e.preventDefault(); // < << Most important missing piece from icedwater } }); go.addEventListener("click", function () { if (outige) { outige.innerHTML += "Clicked!
"; } }); } });

Usa event.key === "Enter" e event.key === "Enter" con il moderno JS!

 const textbox = document.getElementById("txtSearch"); textbox.addEventListener("keypress", function onEvent(event) { if (event.key === "Enter") { document.getElementById("btnSearch").click(); } }); 

Mozilla Docs

Browser supportati

 document.onkeypress = function (e) { e = e || window.event; var charCode = (typeof e.which == "number") ? e.which : e.keyCode; if (charCode == 13) { // Do something here printResult(); } }; 

Ecco i miei due centesimi. Sto lavorando su un’app per Windows 8 e desidero che il pulsante registri un evento click quando premo il pulsante Invio. Lo sto facendo in JS. Ho provato un paio di suggerimenti, ma ho avuto problemi. Questo funziona bene.

Per farlo con jQuery:

 $("#txtSearch").on("keyup", function (event) { if (event.keyCode==13) { $("#btnSearch").get(0).click(); } }); 

Per farlo con JavaScript normale:

 document.getElementById("txtSearch").addEventListener("keyup", function (event) { if (event.keyCode==13) { document.getElementById("#btnSearch").click(); } }); 

Per coloro che amano la brevità e l’approccio moderno.

 input.addEventListener('keydown', (e) => {if (e.keyCode == 13) doSomething()}); 

dove input è una variabile che contiene il tuo elemento di input.

In jQuery, puoi utilizzare event.which==13 . Se si dispone di un form , è ansible utilizzare $('#formid').submit() (con i listener di eventi corretti aggiunti alla sottomissione di detto modulo).

 $('#textfield').keyup(function(event){ if(event.which==13){ $('#submit').click(); } }); $('#submit').click(function(e){ if($('#textfield').val().trim().length){ alert("Submitted!"); } else { alert("Field can not be empty!"); } }); 
     

Questo potrebbe anche aiutare, una piccola funzione JavaScript, che funziona bene:

   

So che questa domanda è stata risolta, ma ho appena trovato qualcosa che può essere utile per gli altri.