Tasti multipli inviare il modulo HTML - designare un tasto di default [duplicato]

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

  •  21-09-2019
  •  | 
  •  

Domanda

    

Questa domanda ha già una risposta qui:

    
            
  •              più pulsanti presentare in un modulo HTML                                      23 risposte                          
    •     
    

Ho una forma che ha tre pulsanti presenti quanto segue: 

<input type="submit" name="COMMAND" value="&lsaquo; Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="location = 'yada-yada.asp';">

La fila di tasti è un mix di presentare, pulsanti JavaScript reset e. L'ordine dei pulsanti è soggetto a modifiche, ma in ogni caso il pulsante di salvataggio rimane tra i pulsanti Prev e Next.

Il problema qui è che quando un utente preme Inserisci per inviare il modulo, il post variabile "COMANDO" contiene "Indietro"; normale, in quanto questo è il primo pulsante di invio del modulo. Io però voglio il pulsante "Avanti" per essere attivato quando l'utente invia il modulo tramite il pulsante Invio . E 'un po' come impostarlo come predefinito pulsante di invio, anche se ci sono altri tasti prima di esso.

È stato utile?

Soluzione

Il mio suggerimento è di non combattere questo comportamento. È possibile modificare in modo efficace l'ordine utilizzando galleggianti. Ad esempio: 

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

con: 

#buttons { overflow: hidden; }
#buttons input { float: right; }

in modo efficace invertire l'ordine e quindi il pulsante "Avanti" sarà il valore innescata premendo Invio.

Questo tipo di tecnica coprirà molte circostanze, senza dover ricorrere a metodi JavaScript più hacky.

Altri suggerimenti

Il primo pulsante è sempre il default; esso non può essere modificato. Mentre si possono cercare di risolvere il problema con JavaScript, la forma si comporterà in modo imprevisto in un browser, senza scripting, e ci sono alcuni casi usabilità / accessibilità angolo a cui pensare. Ad esempio, il codice collegato a Zoran presenterà accidentalmente il modulo a stampa in una Inserisci <input type="button">, che normalmente non accadere, e non prenderà il comportamento di IE di invio del modulo per Enter stampa su altri contenuti non campo nella modulo. Quindi, se si fa clic su un testo in un <p> in forma con lo script e premere Invio, il tasto sbagliato sarà presentato ... particolarmente pericoloso se, come indicato in questo esempio, il pulsante di default è vero 'Elimina'!

Il mio consiglio sarebbe quello di dimenticare di usare hack di scripting per riassegnare defaultness. Andare con il flusso del browser e appena messo prima il pulsante di default. Se non è possibile incidere il layout di dare l'ordine sullo schermo che si desidera, allora si può fare avendo un pulsante invisibile manichino prima nel sorgente, con lo stesso nome / valore come il pulsante che si desidera essere di default: 

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />

.defaultsink {
    position: absolute; left: -100%;
}

(nota:. Posizionamento viene utilizzato per spingere il pulsante off-screen, perché display: none e visibility: hidden avere un browser-variabile effetti collaterali sul se il pulsante viene preso come predefinito e se è presentata)

frettoloso e approssimativo è possibile creare un duplicato nascosta del-pulsante di invio, che dovrebbe essere utilizzato, quando si preme Invio.

Esempio CSS 

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

Esempio HTML 

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

Se qualcuno ora colpisce entrare nel modulo, il prossimo-tasto (nascosto) verrà utilizzato come mittente.

Testato su IE9, Firefox, Chrome e Opera

Imposta type=submit al pulsante che desideri essere predefinito e type=button ad altri tasti. Ora il modulo qui sotto premendo invio è possibile in tutti i campi di input, e il pulsante Render funzionerà (nonostante il fatto che è il secondo pulsante nella forma).

Esempio: 

    <button id='close_button' class='btn btn-success'
            type=button>
      <span class='glyphicon glyphicon-edit'> </span> Edit program
    </button>
    <button id='render_button' class='btn btn-primary'
            type=submit>             <!--  Here we use SUBMIT, not BUTTON -->
      <span class='glyphicon glyphicon-send'> </span> Render
    </button>

Testato in FF24 e Chrome 35.

Se stai usando jQuery, questa soluzione da un commento fatto qui è piuttosto liscia: 

$(function(){
    $('form').each(function () {
        var thisform = $(this);
        thisform.prepend(thisform.find('button.default').clone().css({
            position: 'absolute',
            left: '-999px',
            top: '-999px',
            height: 0,
            width: 0
        }));
    });
});

Basta aggiungere class="default" al pulsante che si desidera essere il default. Si mette una copia nascosta di quel pulsante proprio all'inizio della forma.

Sono resuscitare questo perché ero alla ricerca di un modo non JavaScript per fare questo. Non ero nei gestori di chiave, e la roba posizionamento CSS è stato causando ordine di tabulazione per rompere dal riposizionamento CSS non cambia l'ordine di tabulazione.

La mia soluzione è basata sulla risposta a https://stackoverflow.com/a/9491141 .

La fonte soluzione è al di sotto. tabindex viene utilizzato per correggere il comportamento scheda del pulsante nascosto, così come Aria-nascosti per evitare di avere il pulsante letta dai lettori di schermo / individuate dai dispositivi di assistenza. 

<form method="post" action="">
  <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button>
  <div class="form-group">
    <label for="test-input">Focus into this input: </label>
    <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" />
  </div>

tasto 1 ° in DOM   2 ° pulsante nel DOM   3 ° pulsante nel DOM

Essential CSS per questa soluzione: 

.default-button-handler {
  width: 0;
  height: 0;
  padding: 0;
  border: 0;
  margin: 0;
}

Un'altra soluzione, utilizzando jQuery: 

$(document).ready(function() {
  $("input").keypress(function(e) {
    if (e.which == 13) {
      $('#submit').click();
      return false;
    }

    return true;
  });
});

Questo dovrebbe funzionare sui seguenti forme, rendendo "Update" l'azione di default: 

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <input type="submit" name="button2" value="Delete" />
  <input type="submit" name="button1" id="submit" value="Update" />
</form>

Così come: 

<form name="f" method="post" action="/action">
  <input type="text" name="text1" />
  <button type="submit" name="button2">Delete</button>
  <button type="submit" name="button1" id="submit">Update</button>
</form>

Questa intrappola il tasto Invio solo quando un campo di input nel modulo è attivo.

Non si dovrebbe usare i tasti con lo stesso nome. E 'cattivi semantica. Invece, si dovrebbe modificare il proprio back-end per cercare diversi valori del nome viene impostato: 

<input type="submit" name="COMMAND_PREV" value="&lsaquo; Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset"  name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;">
<input type="button" name="NOTHING" value="Skip &rsaquo;" onclick="window.location = 'yada-yada.asp';">

Dato che io non so che lingua si sta utilizzando sul backend, ti darò alcuni pseudocodice: 

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

La soluzione di bobince ha lo svantaggio di creare un pulsante che può essere Tab -d finita, ma altrimenti inutilizzabile. Questo può creare confusione per gli utenti della tastiera.

Una diversa soluzione è quella di utilizzare il poco noto attributo form: 

<form>
    <input name="data" value="Form data here">
    <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action">
    <input type="submit" name="submit" value="Submit">
</form>

<form id="form2"></form>

Questa è HTML standard , però purtroppo non supportato in Internet Explorer.

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