Attiva un pulsante fai clic con JavaScript sul tasto Invio in una casella di testo

Question

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

Esiste già un pulsante di invio diverso sulla mia pagina corrente, quindi non posso semplicemente rendere il pulsante un pulsante di invio. E solo voglio che il tasto Invio faccia clic su questo pulsante specifico se viene premuto all'interno di questa casella di testo, nient'altro.

<input type="text" id="txtSearch" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 1

In jQuery, funzionerebbe quanto segue:

$("#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.");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton">Submit</button>

O in semplice JavaScript, il seguente funzionerebbe:

document.getElementById("id_of_textbox")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("id_of_button").click();
    }
});

document.getElementById("pw")
    .addEventListener("keyup", function(event) {
    event.preventDefault();
    if (event.keyCode === 13) {
        document.getElementById("myButton").click();
    }
});

function buttonCode()
{
  alert("Button code executed.");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Username:<input id="username" type="text"><br>
Password:&nbsp;<input id="pw" type="password"><br>
<button id="myButton" onclick="buttonCode()">Submit</button>

Answer 2

Quindi codificalo!

<input type = "text"
       id = "txtSearch" 
       onkeydown = "if (event.keyCode == 13)
                        document.getElementById('btnSearch').click()"    
/>

<input type = "button"
       id = "btnSearch"
       value = "Search"
       onclick = "doSomething();"
/>

Answer 3

Capito questo:

<input type="text" id="txtSearch" onkeypress="return searchKeyPress(event);" />
<input type="button" id="btnSearch" Value="Search" onclick="doSomething();" />

<script>
function searchKeyPress(e)
{
    // look for window.event in case event isn't passed in
    e = e || window.event;
    if (e.keyCode == 13)
    {
        document.getElementById('btnSearch').click();
        return false;
    }
    return true;
}
</script>

Answer 4

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

<input type = "submit"
       id = "btnSearch"
       value = "Search"
       onclick = "return doSomething();"
/>

Nota che avrai bisogno di un elemento <form> che contenga i campi di input per farlo funzionare (grazie Sergey Ilinsky).

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

Answer 5

Dato che nessuno ha ancora usato addEventListener, ecco la mia versione. Dati gli elementi:

<input type = "text" id = "txt" />
<input type = "button" id = "go" />

Vorrei usare quanto segue:

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 cambiare il tipo di evento e l'azione separatamente mantenendo pulito l'HTML.

  

Nota che probabilmente vale la pena assicurarsi che questo sia al di fuori di un <form> perché quando ho racchiuso questi elementi in essi premendo Invio ha inviato il modulo e ricaricato la pagina. Mi ci sono voluti alcuni battiti di ciglia per scoprire.

     

    

Addendum : grazie a un commento di @ruffin, ho aggiunto il gestore eventi mancante e un preventDefault per consentire a questo codice di (presumibilmente) funzionare anche all'interno di un modulo. (Vado a provare questo, a quel punto rimuoverò il contenuto tra parentesi.)

  

Answer 6

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 è data solo in jQuery, quindi ho pensato di dare qualcosa anche in JavaScript.

Answer 7

Un trucco di base che puoi usare per questo che non ho visto completamente menzionato. Se vuoi fare un'azione ajax o qualche altro lavoro su Enter ma non vuoi effettivamente inviare un modulo puoi farlo:

<form onsubmit="Search();" action="javascript:void(0);">
    <input type="text" id="searchCriteria" placeholder="Search Criteria"/>
    <input type="button" onclick="Search();" value="Search" id="searchBtn"/>
</form>

Impostazione action = " javascript: void (0); " come questo è una scorciatoia per prevenire il comportamento predefinito essenzialmente. In questo caso viene chiamato un metodo se premi Invio o fai clic sul pulsante e viene effettuata una chiamata Ajax per caricare alcuni dati.

Answer 8

Provalo:

<input type="text" id="txtSearch"/>
<input type="button" id="btnSearch" Value="Search"/>

<script>             
   window.onload = function() {
     document.getElementById('txtSearch').onkeypress = function searchKeyPress(event) {
        if (event.keyCode == 13) {
            document.getElementById('btnSearch').click();
        }
    };

    document.getElementById('btnSearch').onclick =doSomething;
}
</script>

Answer 9

Per attivare 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();
    }
}

Answer 10

onkeydown="javascript:if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {document.getElementById('btnSearch').click();}};"

Questo è solo qualcosa che ho da un progetto piuttosto recente ... L'ho trovato in rete e non ho idea se c'è un modo migliore o meno nel semplice vecchio JavaScript.

Answer 11

Anche se, sono abbastanza sicuro che fino a quando c'è un solo campo nel modulo e un pulsante di invio, premendo invio dovrebbe inviare il modulo, anche se c'è un altro modulo nella pagina.

È quindi possibile acquisire il modulo onsubmit con js ed eseguire qualsiasi convalida o callback desiderati.

Answer 12

Questa è una soluzione per tutti gli YUI là fuori:

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 innescare oggetti DOM a cui è stata iniettata la funzionalità pulsante - ma questa è un'altra storia ...

Answer 13

In Angolare2 :

(keyup.enter)="doSomething()"

Se non si desidera un feedback visivo nel pulsante, è consigliabile 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.

Answer 14

Nessuno ha notato l'html attibute " accesskey " che è disponibile da un po '.

Questo non è un modo javascript per creare scorciatoie da tastiera.

La chiave di accesso attribuisce scorciatoie su MDN

Inteso per essere usato in questo modo. L'attributo html stesso è sufficiente, tuttavia è possibile modificare il segnaposto o altri indicatori a seconda del browser e del sistema operativo. Lo script è un approccio scratch non testato per dare un'idea. Potresti voler utilizzare un rilevatore di librerie del 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...'}

<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>

Answer 15

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

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

Mozilla Docs

Browser supportati

Answer 16

Questo onchange è vicino, ma si comporta in modo anomalo rispetto al browser indietro e avanti (su Safari 4.0.5 e Firefox 3.6.3), quindi alla fine non lo consiglierei.

<input type="text" id="txtSearch" onchange="doSomething();" />
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 17

Questo caso nel caso tu voglia disabilitare anche il pulsante di invio da Posting to server ed eseguire lo script Js.

<input type="text" id="txtSearch" onkeydown="if (event.keyCode == 13)
 {document.getElementById('btnSearch').click(); return false;}"/>
<input type="button" id="btnSearch" value="Search" onclick="doSomething();" />

Answer 18

event.returnValue = false

Usalo quando gestisci l'evento o nella funzione chiamata dal gestore dell'evento.

Funziona almeno in Internet Explorer e Opera.

Answer 19

Per jquery mobile ho dovuto fare

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

Answer 20

Per aggiungere una soluzione JavaScript completamente semplice indirizzata a il problema di @ icedwater con l'invio del modulo , ecco una soluzione completa con form .

  

NOTA: Questo è per " browser moderni " ;, incluso IE9 +. La versione di IE8 non è molto più complicata e può essere imparata qui .

---

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

HTML

<body>
    <form>
        <input type="text" id="txt" />
        <input type="button" id="go" value="Click Me!" />
        <div id="outige"></div>
    </form>
</body>

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!<br />";
            }
        });
    }
});

Answer 21

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 voglio che il pulsante registri un evento clic quando premo il pulsante Invio. Lo sto facendo in JS. Ho provato un paio di suggerimenti, ma ho avuto problemi. Funziona bene.

Answer 22

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();
    }
});

Answer 23

In Javascript moderno, non definito (senza keyCode o onkeydown):

<input onkeypress="if(event.key == 'Enter') {console.log('Test')}">

Answer 24

Per coloro a cui può piacere la brevità e il moderno approccio js.

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

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

Answer 25

In jQuery, puoi usare event.which==13. Se hai un form, puoi usare $('#formid').submit() (con i listener di eventi corretti aggiunti all'invio del suddetto 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!");
   }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="textfield">
Enter Text:</label>
<input id="textfield" type="text">
<button id="submit">
Submit
</button>

Answer 26

Anche questo potrebbe aiutare, una piccola funzione JavaScript, che funziona bene:

<script type="text/javascript">
function blank(a) { if(a.value == a.defaultValue) a.value = ""; }

function unblank(a) { if(a.value == "") a.value = a.defaultValue; }
</script> 
<input type="text" value="email goes here" onfocus="blank(this)" onblur="unblank(this)" />

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