Configurando un valor "predeterminado" de un cuadro de entrada de texto HTML. Revertir el valor al hacer clic en ESC

Question

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

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

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, cuando se crea un cuadro de entrada de texto mediante programación, golpeando ESC siempre parece en blanco de la caja, aunque yo creo que con un valor por defecto de este modo:

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

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?

Answer 1

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 ampliar esta funcionalidad a otros navegadores a continuación, me gustaría utilizar los datos de jQuery objeto para guardar 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')); } 
}); 

Answer 2

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

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

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

Por favor, hágamelo saber si nos referimos algo diferente, puedo ajustar el código más tarde.

Answer 3

Es posible buscar el atributo placeholder que mostrará un texto gris en el campo de entrada en vacío.

De Mozilla Developer Network:

Una sugerencia al usuario de lo que puede ser introducido en el control. El texto de marcador de posición no debe contener retornos de carro o avance 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, ya que es una etiqueta bastante 'nueva' (de la especificación HTML5 afaik) es posible que desee probar el navegador para asegurarse de que su público objetivo está bien con esta solución.
(Si no decirle decirles que actualizar el navegador causa' esta etiqueta funciona como un encanto; o))

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

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

Answer 4

Ver la propiedad valor predeterminado de una entrada de texto, que también se usa cuando se restablece el formulario haciendo clic en un botón de <input type="reset"/> (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp)

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