¿Cómo puedo implementar filigranas similares a Stack Overflow en formularios?

Question

Recuerdo haber visto un tutorial en algún lugar que habla de cómo personalizar sus formularios de entrada de una manera más "utilizable".

Básicamente, tiene un valor de marcador de posición y cuando ingresa la entrada, oculta la pista por así decirlo.

Ahora, para que quede claro: no quiero que la sugerencia (texto de valor de marcador de posición) desaparezca en el enfoque, sino que vaya más claro cuando empiezo a escribir algo. Buenos ejemplos:

• Mira la forma en Aardvark. Así es exactamente como deseo tener mis formularios de entrada.

• Nuestro propio desbordamiento de pila: cuando intenta hacer una pregunta, al hacer clic dentro de cualquier formulario de entrada, no oculta el texto de inmediato. Usted ve su cursor así como la pista. pero cuando empiezas a escribir, oculta la pista. (Yo preferiría tener que ir a un tono mucho más ligero en lugar de esconderse todos juntos, sin embargo, como el ejemplo Aardvark arriba.)

Recuerdo muy claramente leyendo un tutorial en algún lugar de la interwebz con este requisito exacto, pero maldición, me olvidé de marcarlo.

¿Alguna sugerencia/vínculo?

[Actualización: Recientemente encontré un plugin jQuery In-Field Labels que hace exactamente lo que quiero. Además, here's the link a una mejora del mismo complemento. ]

Answer 1

es posible que desee iniciar de esta:

<input type="text" value="Your Hint Here" 
     onFocus="if (this.value == 'Your Hint Here') this.style.color = '#ccc';" 
     onKeyDown="if (this.value == 'Your Hint Here') { 
         this.value = ''; this.style.color = '#000'; }"> 

Probablemente debería modificar el anterior para utilizar funciones de JavaScript de tal manera de no repetir la cadena toque tres veces, pero espero que esto se puede obtener yendo en la dirección correcta.

También he notado que los "Join Now" formas de vark.com también establecen la posición del cursor hasta el inicio del cuadro de texto en lugar de dejarlo al final. Esto puede ser poco complicado de hacer que funcione a través del navegador, pero puede que desee comprobar la solución propuesta en el siguiente artículo de Josh Stodola:

• Setting Cursor Position in a Textbox or TextArea with Javascript

Answer 2

un campo de entrada no puede tener texto predeterminado y el texto ingresado por el usuario al mismo tiempo. La única manera posible de lograr exactamente lo que está pidiendo es tener una imagen de fondo en los campos de entrada con una imagen que contenga el texto predeterminado que deseaba mostrar, pero I altamente recomendamos esto ya que dos capas de texto serán muy confusas para el usuario. La forma más común de lograr esto (y lo que se hace en su sitio vark.com ejemplo) es utilizar el método focus para limpiar el texto:

$('#my_input').focus(function() { 
    if($(this).val() == 'default text') { 
    $(this).val(''); 
    } 
}); 

Para lograr que la forma en StackOverflow (y Vark.formulario de registro de com) hace que pueda utilizar el mismo método con el keydown evento:

$('#my_input').keydown(function() { 
    if($(this).val() == 'default text') { 
    $(this).val(''); 
    } 
}); 

Para lograr tanto el cambio de color en el enfoque y texto claro en keydown sería:

// set text to grey on focus 
$('#my_input').focus(function() { 
    if($(this).val() == 'default text') { 
    $(this).css('color', '#999999'); 
    } 
}); 

// set text to black and clear default value on key press 
$('#my_input').keydown(function() { 
    if($(this).val() == 'default text') { 
    $(this).val(''); 
    $(this).css('color', '#000000'); 
    } 
}); 

Answer 3

HTML5 tiene el placeholder attribute, que está diseñado para esta misma tarea.

Solo WebKit (el motor de renderizado utilizado en Safari y Google Chrome) lo admite hasta ahora. Querrá una reserva de JavaScript como la de Daniel para cuando el marcador de posición no sea compatible.

Es trivial para check for placeholder support in JavaScript.

Answer 4

En respuesta a la publicación de @ Paul, noté que el comportamiento del marcador de posición HTML5 actúa de manera extraña en mi emulador de Android. El marcador de posición se ve muy bien hasta que hace clic en él y se pone negro con el cursor a la derecha de la palabra. Por supuesto, si escribes, desaparecerá, pero no es intuitivo. Así que escribí un poco de jQuery para solucionarlo (¿dónde está mi placa HTML5/jQuery?)

$(document).ready(function() { 
    $('input[placeholder]').focus(function() { 
     if (!$(this).val()) $(this).val(''); 
    }); 
}); 

Answer 5

escribí this example la que -a falta de un mejor nombre marcadores de posición persistentes llamados.

Se requiere un poco más marcado, un div envolver una label y input, pero que resuelve un montón de otros problemas (como marcadores de posición que consiguen en los datos del formulario o los campos de contraseña no funciona) y el recargo real es muy limpio para leer . Usted termina con algo como esto:

<div class="input-wrapper"> 
    <label for="id_username">Username</label> 
    <input id="id_username" type="text" name="username"> 
</div> 

y después de incluir el CSS y el JS, simplemente funciona.