para - Varios botones de envío en formato HTML: designe un botón como predeterminado
dos botones en un formulario html (9)
Tengo un formulario que tiene tres botones de envío de la siguiente manera:
<input type="submit" name="COMMAND" value="‹ Prev">
<input type="submit" name="COMMAND" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="location = ''yada-yada.asp'';">
La fila de botones es una combinación de botones de enviar, restablecer y javascript. El orden de los botones está sujeto a cambios pero, en cualquier caso, el botón Guardar permanece entre los botones anterior y siguiente. El problema aquí es que cuando un usuario pulsa "enter" para enviar el formulario, la variable de publicación "COMMAND" contiene "Prev"; normal, ya que este es el primer botón de enviar en el formulario. Sin embargo, quiero que se active el botón "Siguiente" cuando el usuario envíe el formulario a través del botón de ingresar. Algo así como configurarlo como el botón de envío predeterminado, a pesar de que hay otros botones antes.
El primer botón siempre es el predeterminado; no puede ser cambiado Si bien puede intentar repararlo con JavaScript, el formulario se comportará de forma inesperada en un navegador sin secuencias de comandos, y hay algunos casos de usabilidad / accesibilidad en las esquinas para pensar. Por ejemplo, el código vinculado por by Zoran enviará accidentalmente el formulario en Enter (Intro) en un <input type="button"> , lo que normalmente no sucedería, y no detectará el comportamiento de IE al enviar el formulario para Enter presione en otro contenido no de campo en el formulario. Entonces, si haces clic en algún texto en una <p> en el formulario con esa secuencia de comandos y presionas Enter, se enviará el botón incorrecto ... ¡especialmente peligroso si, como se muestra en ese ejemplo, el botón predeterminado real es ''Eliminar''!
Mi consejo sería olvidar el uso de secuencias de scripts para reasignar la predeterminación. Vaya con el flujo del navegador y simplemente coloque primero el botón predeterminado. Si no puede hackear el diseño para darle el orden en pantalla que desea, puede hacerlo con un botón invisible simulado primero en el origen, con el mismo nombre / valor que el botón que desea que sea el predeterminado:
<input type="submit" class="defaultsink" name="COMMAND" value="Save" />
.defaultsink {
position: absolute; left: -100%;
}
(nota: el posicionamiento se usa para presionar el botón fuera de la pantalla porque display: none y visibility: hidden tiene efectos secundarios variables del navegador sobre si el botón se toma como predeterminado y si se envía).
Establecer type=submit al botón que desea que sea predeterminado y type=button a otros botones. Ahora, en el siguiente formulario, puede pulsar Intro en cualquier campo de entrada y el botón Render (a pesar de que es el segundo botón en el formulario).
Ejemplo:
<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>
Probado en FF24 y Chrome 35.
Estoy resucitando esto porque estaba investigando una forma que no es JavaScript para hacer esto. No estaba al tanto de los manejadores de claves, y el material de posicionamiento de CSS causaba que el orden de las pestañas se rompiese, ya que el reposicionamiento de CSS no cambia el orden de las pestañas.
Mi solución se basa en la respuesta en https://.com/a/9491141 .
La fuente de la solución está abajo. tabindex se usa para corregir el comportamiento de las pestañas del botón oculto, así como aria-hidden para evitar que los lectores de pantalla lean el botón / se identifiquen con dispositivos de asistencia.
<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>
Primer botón en DOM 2do botón en DOM 3er botón en DOM
CSS esencial para esta solución:
.default-button-handler {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}
La solución de Bobince tiene la desventaja de crear un botón que puede ser Tab -d, pero inutilizable. Esto puede crear confusión para los usuarios de teclado.
Una solución diferente es usar el atributo de form poco conocido:
<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>
Esto es HTML estándar , pero desafortunadamente no es compatible con Internet Explorer.
Mi sugerencia es no luchar contra este comportamiento. Puedes modificar el orden de forma efectiva usando flotadores. Por ejemplo:
<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; }
invertirá efectivamente el orden y, por lo tanto, el botón "Siguiente" será el valor que se activa pulsando enter.
Este tipo de técnica cubrirá muchas circunstancias sin tener que recurrir a métodos de JavaScript más hacky.
No deberías estar usando botones del mismo nombre. Es mala semántica. En su lugar, debe modificar su back-end para buscar valores de nombres diferentes que se establezcan:
<input type="submit" name="COMMAND_PREV" value="‹ Prev">
<input type="submit" name="COMMAND_SAVE" value="Save">
<input type="reset" name="NOTHING" value="Reset">
<input type="submit" name="COMMAND_NEXT" value="Next ›">
<input type="button" name="NOTHING" value="Skip ›" onclick="window.location = ''yada-yada.asp'';">
Como no sé qué idioma estás usando en el backend, te daré un pseudocódigo:
if (input name COMMAND_PREV is set) {
} else if (input name COMMAND_SAVE is set) {
} else if (input name COMMENT_NEXT is set) {
}
Otra solución, usando jQuery:
$(document).ready(function() {
$("input").keypress(function(e) {
if (e.which == 13) {
$(''#submit'').click();
return false;
}
return true;
});
});
Esto debería funcionar en los siguientes formularios, haciendo que "Update" sea la acción predeterminada:
<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>
Tanto como:
<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>
Esto atrapa la tecla Intro solo cuando un campo de entrada en el formulario tiene enfoque.
Quick''n''dirty puede crear un duplicado oculto del botón de enviar, que se debe utilizar, al presionar enter.
Ejemplo de CSS
input.hidden {
width: 0px;
height: 0px;
margin: 0px;
padding: 0px;
outline: none;
border: 0px;
}
HTML de ejemplo
<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />
Si alguien acierta ahora ingrese en su formulario, el siguiente botón (oculto) se usará como remitente.
Probado en IE9, Firefox, Chrome y Opera
Si está utilizando jQuery, esta solución de un comentario realizado here es bastante hábil:
$(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
}));
});
});
Simplemente agregue class="default" al botón que desea que sea el predeterminado. Pone una copia oculta de ese botón al principio del formulario.