Ho un input di testo e un pulsante (vedi sotto). Come posso usare JavaScript per attivare l'evento click del pulsante quando Entersi preme il tasto 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 voglio solo che il Entertasto 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();" />

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>

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();"
/>

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>

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 <form>elemento contenente i campi di input per farlo funzionare (grazie Sergey Ilinsky).

Non è una buona pratica ridefinire il comportamento standard, la Enterchiave dovrebbe sempre chiamare il pulsante di invio su un modulo.

Dal momento che nessuno ha addEventListenerancora usato , 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ò consente di modificare il tipo di evento e l'azione separatamente mantenendo pulito l'HTML.

Si noti 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 preventDefaultper 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.)

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.

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>

Setting action = "javascript: void (0);" come questo è una scorciatoia per prevenire il comportamento predefinito essenzialmente. In questo caso viene chiamato un metodo se si preme invio o si fa clic sul pulsante e viene effettuata una chiamata ajax per caricare alcuni dati.

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>

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

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.

Usa keypresse 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

Tuttavia, 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.

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", "ALT+SHIFT+Z");
} else if (isWin) {
   input.setAttribute("placeholder", "ALT+Z");
} else if (isMac) {
  input.setAttribute("placeholder", "CTRL+ALT+Z");
} else if (isOpera) {
  input.setAttribute("placeholder", "SHIFT+ESCAPE->Z");
} else {'Point me to operate...'}

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

Questa è una soluzione per tutti gli amanti della 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 ...

In Angular2 :

(keyup.enter)="doSomething()"

Se non si desidera un feedback visivo nel pulsante, è consigliabile non fare riferimento al pulsante ma richiamare direttamente il controller.

Inoltre, l'id non è necessario: un altro modo NG2 di separare tra la vista e il modello.

Questo nel caso in cui desideri anche digitare il pulsante di invio da Invio al 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();" />

Questo tentativo di scambio è vicino, ma si comporta male 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();" />

event.returnValue = false

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

Funziona almeno in Internet Explorer e Opera.

Per jquery mobile ho dovuto fare

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

Per aggiungere una soluzione JavaScript completamente semplice che abbia risolto il problema di @ icedwater con l'invio del modulo , ecco una soluzione completa conform .

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

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

In Javascript moderno, non specificato (senza keyCodeo onkeydown):

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

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. 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 potrebbero desiderare la brevità e l'approccio moderno.

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

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

Poiché JS moderno keyCodeè obsoleto, utilizzare keyinvece

searchInput.onkeyup = function (e) {
    if (e.key === 'Enter') {
        searchBtn.click();
    }
}

In jQuery, puoi usare event.which==13. Se si dispone di un form, è possibile utilizzare $('#formid').submit()(con i listener di eventi corretti aggiunti all'invio di tale 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>

Ho sviluppato JavaScript personalizzato per ottenere questa funzione semplicemente aggiungendo classe

Esempio: <button type="button" class="ctrl-p">Custom Print</button>

Qui Dai un'occhiata a Fiddle
- o -
guarda l'esempio in esecuzione https://stackoverflow.com/a/58010042/6631280

Nota: sulla logica corrente, è necessario premere Ctrl+ Enter

Questo potrebbe anche 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.