Establecer un valor “predeterminado” del cuadro de entrada de texto HTML. Revertir el valor al hacer clic ESC

Cuando se escribe un formulario web en el navegador, los navegadores recuerdan cuáles son los valores iniciales de un cuadro de ENTRADA de texto. es decir. cuando recibe HTML así:

 

El navegador recuerda “algo” como el valor inicial / predeterminado. Cuando el usuario comienza a escribir sobre él, luego pulsa ESC, el navegador revierte el campo al valor inicial (o en blanco si inicialmente estaba vacío, por supuesto).

Sin embargo, al crear un cuadro de entrada de texto de forma programática, presionar ESC siempre parece dejar en blanco el cuadro, incluso si lo creo con un valor predeterminado como ese:

 $('') 

El navegador no cuenta esto como un valor predeterminado y no lo revierte al presionar ESC. Entonces mi pregunta es, ¿hay alguna manera de crear un cuadro de texto en el código y de alguna manera asignarle un valor predeterminado, por lo que la tecla ESC funciona como si el navegador lo recibió en el documento HTML?

Este comportamiento esc es IE solo por cierto. En lugar de usar jQuery, utiliza un buen javascript antiguo para crear el elemento y funciona.

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

http://jsfiddle.net/gGrf9/

Si desea extender esta funcionalidad a otros navegadores, entonces usaría el objeto de datos de jQuery para almacenar el valor predeterminado. Luego configúralo cuando el usuario presione 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')); } }); 

Puede buscar el atributo de placeholder que mostrará un texto gris en el campo de entrada mientras está vacío.

De la red de desarrolladores de Mozilla:

Una sugerencia para el usuario de lo que se puede ingresar en el control. El texto del marcador de posición no debe contener retornos de carro o alimentaciones de línea. Este atributo se aplica cuando el valor del atributo de tipo es texto, búsqueda, tel, url o correo electrónico; de lo contrario, es ignorado.

Sin embargo, dado que es una etiqueta bastante “nueva” (de la especificación HTML5 afaik), es posible que desee realizar pruebas en el navegador para asegurarse de que su público objective esté bien con esta solución.
(Si no, dígales que actualicen el navegador porque esta etiqueta funciona como un hechizo; o))

Y finalmente un mini-violín para verlo directamente en acción: http://jsfiddle.net/LnU9t/

Editar: Aquí hay una solución jQuery simple que también borrará el campo de entrada si se detecta una tecla de escape: http://jsfiddle.net/3GLwE/

Si la pregunta es: “¿Es posible agregar valor a ESC?”, La respuesta es sí. Puedes hacer algo como eso. Por ejemplo, con el uso de jQuery, se vería a continuación.

HTML

   

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(); } }); }); 

La fuente de trabajo se puede encontrar aquí: http://jsfiddle.net/S3N5H/1/

Por favor, avíseme si quería decir algo diferente, puedo ajustar el código más tarde.

Vea la propiedad DefaultValue de una entrada de texto, también se usa cuando restablece el formulario haciendo clic en un botón ( http://www.w3schools.com/jsref/prop_text_defaultvalue.asp )

Por cierto, el valor por defecto del texto y el marcador de posición son conceptos diferentes, necesita ver cuál se ajusta mejor a sus necesidades