Las entradas de texto en los formularios se pueden utilizar para enviar números. Un uso común sería una entrada de “cantidad” en un sitio de comercio electrónico. Cambiar el valor de la cantidad, desde la perspectiva del usuario, implica tabular o hacer clic en la entrada, eliminar su contenido actual y escribir un nuevo valor. Comportamiento esperado por el que nadie te gritará, pero estas entradas numéricas podrían ser un poco más amigables. Mediante el uso de JavaScript (sí, jQuery), hagámoslo.
HTML limpio
Aquí el marcado del formulario. No se agregó nada adicional, solo HTML limpio. Sin JavaScript, este formulario funcionará perfectamente y no tendrá nada extraño.
<form method="post" action="">
<div>
<label for="name">French Hens</label>
<input type="text" name="french-hens" id="french-hens" value="3">
</div>
<div>
<label for="name">Turtle Doves</label>
<input type="text" name="turtle-doves" id="turtle-doves" value="2">
</div>
<div>
<label for="name">Partridges</label>
<input type="text" name="partridge" id="partridge" value="1">
</div>
<input type="submit" value="Submit" id="submit">
</form>El CSS …
… no es muy interesante. Quizás algunas cosas para tener en cuenta. Todo está flotando a la izquierda y los DIV tienen un rebosadero oculto para limpiar los flotadores. Las etiquetas son bloque de visualización y alineación de texto a la derecha para que la cuadrícula funcione. Los ajustes de píxeles se realizan aquí y allá para que las cosas se alineen correctamente. No dediqué mucho tiempo a esto, por lo que es posible que veas algunas diferencias entre navegadores.
Hacer algunos botones
Photoshop hasta un par de botones. También podría usar un sprite, ¿eh? Incluiré el PSD en la descarga en caso de que desee utilizarlos.
Agregar botones de incremento
Necesitamos agregar estos botones a cada entrada. Notará en el marcado que cada par de etiqueta / entrada está envuelto en un DIV. Esta es una buena práctica para que las entradas de etiquetas se dividan en su propia línea (mejor legibilidad) para cuando CSS está desactivado. También es necesario para la validación con algunos DOCTYPES. Y es el pequeño gancho perfecto al que podemos apuntar para agregar estos botones.
$(function() {
$("form div").append('<div class="inc button">+</div><div class="dec button">-</div>');
});Dos clases cada una, una clase de “botón” genérico que será el 90% del estilo y la clase que usaremos para vincular el evento de clic. La otra clase única para ajustar la posición del fondo y utilizar el objeto.
Hazlos trabajar
El “inglés llano”:
- Cache el selector
- Guarde el valor “antiguo” de la entrada (valor en el momento de hacer clic)
- Si se hace clic en el botón “más” …
- … incrementar el valor uno
- De lo contrario, si se hace clic en el botón “menos” …
- … disminuya el valor en uno
- Suelta el nuevo valor en la entrada
$(".button").on("click", function() {
var $button = $(this);
var oldValue = $button.parent().find("input").val();
if ($button.text() == "+") {
var newVal = parseFloat(oldValue) + 1;
} else {
// Don't allow decrementing below zero
if (oldValue > 0) {
var newVal = parseFloat(oldValue) - 1;
} else {
newVal = 0;
}
}
$button.parent().find("input").val(newVal);
});El código anterior hace todo lo que describimos, con un poco de lógica adicional. Antes de disminuir el valor, se asegura de que el número sea al menos un valor de 1 o superior. Esto evita que el valor se vuelva negativo (al menos mediante el uso de estos botones). Esta es una obviedad para las entradas de estilo “cantidad”, pero si su uso no necesita esto, simplemente elimine el contenedor “si”.
También hay un par de líneas comentadas sobre el ahorro de AJAX. Si su aplicación es tan dinámica como esa, es posible que desee guardar el valor automáticamente después de presionar un botón, haciéndolo sentir un poco más de aplicación de escritorio.
Si tuviera que hacer eso, podría poner un código como este (quizás):
var id = $button.attr("id");
$.ajax({
type: "POST",
url: "dosomething.php?id=" + id + "&newvalue=" + newVal,
success: function() {
$button.parent().find("input").val(newVal);
}
});Probablemente eliminaría la línea inferior de la función de clic donde actualiza el valor y lo dejaría en la subfunción “éxito” de arriba. De esa manera, el número no se actualiza visualmente a menos que el guardado de AJAX haya sido exitoso.
Revisalo
Ver demostración Descargar archivos
MooTools
Y como siempre, David Walsh con un port a MooTools.