Utilizzare Javascript per cambiare che presentano è attivata su pressione di un tasto enter

StackOverflow https://stackoverflow.com/questions/382171

Domanda

Ho una forma in una pagina HTML con più pulsanti che eseguono diverse azioni submit. Tuttavia, quando l'utente sta scrivendo un valore in un input di testo e colpire entra, i browser generalmente comportano come se il successivo pulsante di invio sequenziale è stato attivato. Voglio una particolare azione che si verifichi, quindi una soluzione che ho trovato è stato quello di mettere in invisibile bottoni di invio nel codice HTML subito dopo gli ingressi di testo in questione, in questo modo: 

<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

Questo funziona come un fascino, nella maggior parte dei browser, se non che non è così nel browser WebKit, come Safari e Chrome. Per qualche ragione si salta sopra il pulsante invisibile presentare. Ho cercato di capire come intercettare la pressione di un tasto enter e attivare la presentazione corretta utilizzando Javascript, ma non sono stato in grado di farlo funzionare. Intercettare il keydown e messa a fuoco sul corretto presentare non funziona.

C'è un modo utilizzando Javascript o in altro modo per selezionare quale pulsante di invio verrà utilizzato quando l'utente preme il tasto Invio in un input di testo su un form HTML?

Modifica: Per chiarire, il modulo non può richiedere Javascript per "lavorare" fondamentalmente. Non mi importa se la presentazione entrare chiave è undesireable senza Javascript sul browser WebKit, ma non riesco a rimuovere o cambiare l'ordine dei bottoni di invio.

Questo è quello che ho provato, non cambia il comportamento di presentazione nei browser WebKit.
Quello che ha funzionato è quello di cambiare il messa a fuoco () nel seguente codice per click () . 

document.onkeypress = processKey;

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click(); // previously: focus()
    }
}

EDIT: Soluzione finale:

Funziona con tutti i browser e intercetta solo il tasto invio quando necessario:

HTML: 

<input type="text" name="something" value="blah" 
    onkeydown="return processKey(event)" />
<input type=submit name="desired" value="Save Earth" style="display: none"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />

Javascript: 

function processKey(e)
{
    if (null == e)
        e = window.event ;
    if (e.keyCode == 13)  {
        document.getElementById("foobar").click();
        return false;
    }
}
È stato utile?

Soluzione

Un modo potrebbe essere quello di rimuovere tutti i pulsanti presentare e utilizzare i tasti di ingresso per inviare il modulo programatically. Questo eliminerebbe la possibilità di inviare il modulo premendo il tasto Invio in una casella di testo. Si potrebbe anche lasciare un pulsante di invio come predefinito presentare funzionalità, e utilizzare gli ingressi regolari dei pulsanti per gli altri e inviare il modulo di programatically.

L'ovvio breve caduta di questo è che gli utenti avrebbero richiesto JavaScript sia abilitato. Se questo non è un problema questa è una considerazione per voi.

Modifica

Ecco, ho provato a fare un esempio per voi utilizzando jQuery (la stessa funzionalità possono essere create facilmente senza jQuery) ... fatemi sapere se questo aiuta ... 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Untitled</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type="text/javascript"><!--
    $(document).ready(function(){
        $("#f input").filter(":text").keydown( function(event) {
            if (event.keyCode==13) {
                $(this).nextAll().eq(0).click();
            }
        });
    });
    //--></script>
</head>
<body>
    <form name="f" id="f">
        <input type="text" id="t1" name="t1" /><input type="button" id="b1" name="b1" value="button-one" onclick="alert('clicked enter on textbox 1');" /><br />
        <input type="text" id="t2" name="t2" /><input type="button" id="b2" name="b2" value="button-two" onclick="alert('clicked enter on textbox 2');" /><br />
        <input type="text" id="t3" name="t3" /><input type="button" id="b3" name="b3" value="button-three" onclick="alert('clicked enter on textbox 3');" /><br />
    </form>
</body>
</html>

Altri suggerimenti

Il valore predefinito invisibile presentare l'azione è un approccio ragionevole e non trascina JavaScript nell'equazione. Tuttavia gli elementi del modulo con 'display: none' non sono generalmente affidabili. Io tendo ad usare assolutamente in posizione pulsante di invio prima degli altri sulla pagina, posizionato al largo della sinistra-lato della pagina. E 'ancora abbastanza brutto, ma ottiene il lavoro fatto.

Come sull'utilizzo i CSS? Si può solo impostare il primo pulsante, il pulsante di default al di fuori della zona visibile dello schermo con un "position: absolute; a sinistra: -200px; top: -200px;". Per quanto mi Ricordate, non sarà ignorato da qualsiasi browser, perché non è invisibile. Questo funziona bene: 

<form method="get">
<input type="text" name="something" value="blah"/>
<input type=submit name="desired" value="Save Earth"
       style="position: absolute; left: -200px; top: -200px;"/>
...
<input type=submit name="something_else" value="Destroy Earth" />
...
<input id="foobar" type=submit name="desired" value="Save Earth" />
</form>

E la terra viene salvato ...

Basta controllare l'evento premere il tasto. mettere onkeypress nel tag corpo 


onkeypress=CheckKeyPress()

Poi gestire il tasto Invio 


function CheckKeyPress(){
    var code;
    if(!e) var e = window.event;
    if(e.keyCode){
        code = e.keyCode;
    }else if(e.which){
        code = e.which;
    }
    if(code == 13){
        //Do Something
    }
}

Non intercettare l'evento keydown, intercettare l'evento submit.

così: 

form.onsubmit = function(e){
   // Do stuff.  Change the form's action or method maybe.  
   return true;
}

Cosa succede ad usare forme separate? Forse mi manca qualcosa che rende questo impossibile: P

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top