2010-01-16 13 views
5

I have INPUT element e voglio reimpostare il valore precedente (non necessario valore originale). Ci sono 2 modi:Reset INPUT senza FORM

  1. salvare il valore in un'altra variabile e tirarlo fuori di nuovo
  2. chiave
  3. Premere il tasto ESC. Ma non voglio che gli utenti premano ESC ma facciano clic su un pulsante.

Quindi per # 2, come posso creare un tasto ESC utilizzando jquery?

+0

Per gli spettatori futuri - c'è un default javascript proprietà denominata 'defaultValue'. Potresti usare 'input.value = input.defaultValue' su singoli elementi. Non ha senso salvare i dati in una variabile esterna quando è già lì. – Shadow

risposta

5

Ecco 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> 

Questo in pratica memorizza il valore originale di ogni elemento di input con una classe di remember durante l'onload e indica al pulsante con una classe di reset di ripristinarlo ogni volta che si fa clic.

+0

+1 per usare attr anziché dati. Più pulito e più efficiente! – Ariel

+1

È perfettamente valido avere un '' esterno a '

'. È normale per i moduli che non devono essere inviati. L'unico inconveniente è che i pulsanti di opzione non vengono raggruppati correttamente. – bobince

+0

Hai ragione! Fisso. – BalusC

2

Esc funziona quando si è ancora all'interno del campo.

Nel momento in cui si fa clic sul pulsante, il campo verrà perdere la concentrazione e il valore verrà memorizzato nel campo, quindi non si può annullare attraverso la procedura di browser predefinito ..

È possibile utilizzare solo l'opzione # 1 si parla ..

Sulla sfocatura del campo (l'evento quando si perde fuoco) si dovrebbe memorizzare il valore, e quando si fa clic sul pulsante ripristina più a quella memorizzata ..

2

Dimentica di generare eventi come le sequenze di tasti. Sebbene sia possibile (in vari modi non portatili) creare eventi e instradarli nel sistema di gestione degli eventi, ciò causerà solo il richiamo delle appropriate funzioni del gestore di eventi; Sarà non fare in modo che il browser esegua le azioni predefinite per un'azione generata dall'utente come un clic del tasto o del mouse.

In ogni caso, il comportamento di cui si sta parlando con il ripristino di Escape è una stranezza di IE: in nessun altro browser Escape ha alcun effetto e persino in IE non è affidabile. In particolare, in una forma normale, una stampa di fuga perde le modifiche dall'ultimo fuoco e due pressioni di fuga in una riga reimposta l'intero modulo sui valori iniziali. Tuttavia, se il modulo ha un <input type="reset">, una sola pressione di Escape ripristina il modulo e mette a fuoco il pulsante di ripristino. Questo rende ancora più facile perdere accidentalmente tutto ciò che hai digitato ed è un altro buon motivo per non includere un pulsante di ripristino nei moduli.

Quindi, se si desidera ripristinare i valori iniziali, è possibile chiamare form.reset(). Se si desidera ripristinare solo un campo, è possibile impostare input.value= input.defaultValue (o input.checked= input.defaultChecked per le caselle/radio e allo stesso modo defaultSelected sulle opzioni).

Se, invece, si desidera che il valore che era presente al momento il campo era ultima mirato, come si comporta cioè quando non esiste un pulsante di reset, si dovrà fare un po 'variabile ricordare, ad esempio .:

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

In realtà questa è la risposta GIUSTA/MIGLIORE. Grazie per la spiegazione pulita e dettagliata. Hai reso la mia giornata :) :) –

1

Ogni elemento (input, checkbox, radio) ha un attributo che contiene il valore predefinito, l'elemento è stato inizializzato con. Questo scenario non funziona per i valori precedenti.

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

Per impostare il valore di default ad un ingresso premendo il tasto ESC:

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