Impostazione di un valore "predefinito" della casella di immissione testo HTML. Ripristina il valore quando si fa clic ESC

Question

Quando un modulo web viene scritto nel browser, il browser si ricorda quali sono i valori iniziali sono di una casella di testo di input. vale a dire. quando riceve HTML come questo:

<input type="text" value="something"> 

Il browser ricorda "qualcosa" come valore iniziale/predefinito. Quando l'utente inizia a digitare su di esso, quindi tocca ESC, il browser ripristina il campo al valore iniziale (o vuoto se inizialmente era vuoto).

Tuttavia, quando si crea una casella di testo programmaticamente, colpendo ESC sembra sempre vuota la casella, anche se creo con un valore di default in questo modo:

$('<input type="text" value="something">') 

Il browser non conta questo come un valore predefinito e non ripristina quando si preme ESC. Quindi la mia domanda è, c'è un modo per creare una casella di testo nel codice e in qualche modo assegnargli un valore predefinito, quindi il tasto ESC funziona come se il browser l'avesse ricevuto nel documento HTML?

Answer 1

Questo comportamento è esc IE solo dal modo. Invece di usare jQuery usa un buon vecchio javascript per creare l'elemento e funziona.

var element = document.createElement('input'); 
element.type = 'text'; 
element.value = 100; 
document.getElementsByTagName('body')[0].appendChild(element); 

http://jsfiddle.net/gGrf9/

Se si desidera estendere questa funzionalità per altri browser quindi vorrei utilizzare i dati di jQuery oggetto per memorizzare il valore di default. Quindi impostalo quando l'utente preme escape.

//store default value for all elements on page. set new default on blur 
$('input').each(function() { 
    $(this).data('default', $(this).val()); 
    $(this).blur(function() { $(this).data('default', $(this).val()); }); 
}); 

$('input').keyup(function(e) { 
    if (e.keyCode == 27) { $(this).val($(this).data('default')); } 
}); 

Answer 2

Se la domanda è: "E 'possibile aggiungere valore ESC" che la risposta è sì. Puoi fare qualcosa del genere. Ad esempio con l'uso di jQuery sembrerebbe di seguito.

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

<input type="text" value="default!" id="myInput" /> 

JavaScript

$(document).ready(function(){ 
    $('#myInput').keyup(function(event) { 
     // 27 is key code of ESC 
     if (event.keyCode == 27) { 
      $('#myInput').val('default!'); 
      // Loose focus on input field 
      $('#myInput').blur(); 
     } 
    }); 
}); 

fonte di lavoro può essere trovato qui: http://jsfiddle.net/S3N5H/1/

Si prega di farmi sapere se si intende qualcosa di diverso, posso regolare il codice di seguito.

Answer 3

Si potrebbe cercare l'attributo placeholder che visualizzerà un testo grigio nel campo di inserimento, a vuoto.

Da Mozilla Developer Network:

Un suggerimento per l'utente di ciò che può essere inserito nel controllo. Il testo segnaposto non deve contenere ritorni a capo o line feed. Questo attributo si applica quando il valore dell'attributo type è testo, ricerca, tel, URL o e-mail; altrimenti viene ignorato.

Tuttavia, dal momento che si tratta di un tag abbastanza "nuovo" (dalle specifiche HTML5 afaik), è possibile che si desideri eseguire il test del browser per assicurarsi che il proprio pubblico di destinazione stia bene con questa soluzione.
(Se non dire dire loro di aggiornare il browser causa' questo tag funziona come un fascino; o))

E infine una mini-violino per vedere direttamente in azione: http://jsfiddle.net/LnU9t/

Edit: Ecco un soluzione semplice jQuery che sarà anche cancellare il campo di immissione se viene rilevato un tasto di fuga: http://jsfiddle.net/3GLwE/

Answer 4

Vedere la proprietà defaultValue di un input di testo, è anche utilizzato quando si reimposta il modulo facendo clic su un pulsante di <input type="reset"/> (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp)

btw, defaultValue e testo segnaposto sono concetti diversi, è necessario vedere quale si adatta meglio alle proprie esigenze