passare - richiamare una function javascript




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

Ho un input di testo e un pulsante (vedi sotto). Come posso utilizzare JavaScript per attivare 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.

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

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


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>

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.");
});
<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 potrebbe funzionare:

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>


In jQuery, puoi utilizzare event.which==13 . Se si dispone di un form , è possibile 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!");
   }
});
<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>


Nel caso in cui si desideri disattivare anche il pulsante Invio da Posting 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();" />

Nessuno ha notato la "chiave di accesso" di html che è disponibile da un po '.

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

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...'}
<input type="text" id="guestInput" accesskey="z" placeholder="Acces shortcut:"></input>


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

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.


Per jquery mobile dovevo farlo

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

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

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

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 <form> 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).


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.


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.

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

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


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 possibile acquisire il modulo onsubmit con js e fare qualsiasi convalida o callback che si desidera.


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>

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.


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.





onkeypress