¿Cómo puedo aplicar marcas de agua de desbordamiento de pila, como en las formas?

Question

Recuerdo ver un tutorial en alguna parte que habla de cómo el estilo de sus formularios de entrada de una manera más “utilizables”.

En esencia, tiene un valor de marcador de posición y al entrar en la entrada, se esconde la indirecta por así decirlo.

Ahora, sólo para ser claro: no quiero la indirecta (valor de marcador de posición) a desaparecer en el foco, sino más bien para ir más ligero cuando por primera vez empieza a escribir algo. Buenos ejemplos:

• Vea las formas de Aardvark . Esto es exactamente lo que desea tener mis formularios de entrada.

• Nuestro propio desbordamiento de pila - cuando intenta hacer una pregunta, al hacer clic en el interior de cualquier forma de entrada, que no oculta el texto de inmediato. Usted ve el cursor, así como la indirecta. pero cuando se empieza a escribir, se esconde la indirecta. (Yo preferiría tener que ir a un tono mucho más ligero en lugar de esconderse todos juntos, sin embargo, como en el ejemplo anterior Aardvark.)

Recuerdo muy claramente leyendo un tutorial en algún lugar de la interwebz con este requisito exacto, pero maldito, me olvidaba que a los favoritos.

Cualquier sugerencia / enlaces?

[Actualización: He encontrado recientemente un plugin de jQuery In-Etiquetas de los campos que hace exactamente lo que yo querer. Además, aquí está el enlace a un mejora de la misma plugin. ]

Answer 1

Es posible que desee comenzar a partir de esto:

<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 conseguir que va en la dirección correcta.

también me di cuenta de que el "Join Now" en formas vark.com también ajustar 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 :

• Ajuste de la posición del cursor en un cuadro de texto o TextArea con Javascript

Answer 2

placeholder atribuyen , que está diseñado para esta tarea misma.

Sólo WebKit (el motor de renderizado utilizado en Safari y Google Chrome) admite que hasta el momento sin embargo. Usted querrá un repliegue JavaScript como Daniel es para que no se admita marcador de posición.

Es trivial comprobar la compatibilidad placeholder en JavaScript .

Answer 3

Un campo de entrada no puede tener texto predeterminado y el texto introducido por el usuario al mismo tiempo. La única manera posible para lograr exactamente lo que están pidiendo es tener una imagen de fondo en los campos de entrada con una imagen que contiene el texto predeterminado que quería mostrar, pero I muy desaconsejar esto como dos capas de texto va a ser muy confuso 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 la método para borrar el texto:

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

Para lograrlo la manera stackoverflow (y formulario de registro de Vark.com) no se puede utilizar el mismo método con el evento KeyDown :

$('#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 4

En respuesta a @ posterior de Pablo, me di cuenta el comportamiento de la HTML5 marcador de posición actúa de manera extraña en mi emulador de Android. El marcador de posición se ve muy bien hasta que haga clic en él y se convierte en negro con el cursor hacia la derecha de la palabra. Por supuesto, si escribe que va a desaparecer, pero no es intuitiva. 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

este ejemplo la que -a falta de un nombre mejor marcadores de posición persistentes Los 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 de entrar en los datos del formulario o los campos de contraseña no funciona) y el margen de beneficio real es muy limpio para leer. Se 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 JS, simplemente funciona.