2010-01-16 10 views
5

Tengo el elemento ENTRADA y quiero restablecer el valor anterior (valor original no necesario). Hay 2 maneras:Restablecer ENTRADA sin FORM

  1. guardar el valor de otra variable y trate de nuevo
  2. clave
  3. Pulse ESC. Pero no quiero que los usuarios presionen ESC sino que hagan clic en un botón.

Entonces, para # 2, ¿cómo puedo crear una tecla ESC usando jquery?

+0

Para los futuros espectadores - hay un defecto Javascript propiedad llamada 'defaultValue'. Podría usar 'input.value = input.defaultValue' en elementos individuales. No tiene sentido guardar datos en una variable externa cuando ya está allí. – Shadow

Respuesta

5

He aquí un SSCCE:

<!doctype html> 
<html lang="en"> 
    <head> 
     <title>SO question 2079185</title> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $(':input.remember').each(function() { 
        $(this).attr('data-remember', $(this).val()); 
       }); 
       $('button.reset').click(function() { 
        $(':input.remember').each(function() { 
         $(this).val($(this).attr('data-remember')); 
        }); 
       }); 
      }); 
     </script> 
    </head> 
    <body> 
     <input type="text" class="remember" value="foo"> 
     <button class="reset">Reset</button> 
    </body> 
</html> 

Esto básicamente almacena el valor original de cada elemento de entrada con una clase de remember durante la carga e instruye al botón con una clase de reset para restaurarlo cada vez que se hace clic.

+0

+1 para usar attr en lugar de datos. ¡Más limpio y más eficiente! – Ariel

+1

Es perfectamente válido tener '' fuera de '

'. Es normal que los formularios no se envíen. El único inconveniente es que los botones de radio no se agrupan adecuadamente. – bobince

+0

¡Tienes razón! Fijo. – BalusC

2

Esc funciona cuando usted todavía está dentro del campo.

En el momento de hacer clic en el botón, el campo va a perder el enfoque y el valor será almacenado en el campo, por lo que no se puede deshacer a través del procedimiento de búsqueda por defecto ..

Sólo puede utilizar la opción # 1 mencionas ..

el desenfoque del campo (el evento cuando se pierde el foco) se debe almacenar el valor, y al hacer clic en el botón Volver a la almacenada ..

2

Olvídate de generar eventos como pulsaciones de teclas. Aunque puede (de varias formas no portátiles) crear eventos y enrutarlos al sistema de manejo de eventos, esto solo provocará que se llamen las funciones apropiadas del controlador de eventos; Será no hacer que el navegador realice las acciones predeterminadas para una acción generada por el usuario como una pulsación de tecla o un clic del mouse.

En cualquier caso, el comportamiento del que está hablando al reiniciar en Escape es una peculiaridad de IE: en ningún otro navegador el escape tiene ningún efecto, e incluso en IE no es confiable. Específicamente, en una forma normal, una prensa de Escape pierde cambios desde el último foco, y dos presiones de Escape en una fila restablecen todo el formulario a los valores iniciales. Sin embargo, si el formulario tiene un <input type="reset"> en él, una sola pulsación de Escape restablece el formulario y enfoca el botón de reinicio. Esto hace que sea aún más fácil perder accidentalmente todo lo que ha escrito y es otra buena razón para no incluir un botón de reinicio en sus formularios.

Por lo tanto, si desea restablecer los valores iniciales, puede llamar al form.reset(). Si desea restablecer solo un campo, puede configurar input.value= input.defaultValue (o input.checked= input.defaultChecked para casillas de verificación/radios, y de manera similar defaultSelected en opciones).

Sin embargo, si desea que el valor que estaba presente en el momento en el campo de la última enfocada, como IE se comporta cuando no hay un botón de reinicio, que tendrá que hacer alguna variable recuerdo, por ejemplo .:

var undonevalue= $('#undoable').val(); 
$('#undoable').focus(function() { 
    undonevalue= $('#undoable').val(); 
}); 
$('#undoer').click(function() { 
    $('#undoable').val(undonevalue); 
}); 
+0

En realidad esta es la respuesta correcta/mejor. Gracias por la explicación limpia y detallada. Me has alegrado el día :) :) –

1

Cada elemento (entrada, casilla de verificación, radio) tiene un atributo que contiene el valor predeterminado, el elemento se inició con. Este escenario no funciona para valores previos.

// pseudocode 
input.defaultValue; 
radio.defaultChecked; 
checkbox.defaultChecked; 

Para establecer el valor predeterminado a una entrada pulsando la tecla ESC:

$(document).ready(function(){ 
    // reset by pressing ESC with focus on input 
    $('input').keypress(function(e) { 
     if (e.keyCode == 27) { 
      this.value = this.defaultValue; 
     } 
    }); 
}); 
Cuestiones relacionadas