Estoy experimentando con una variedad de técnicas para poner la etiqueta para el cuadro de entrada de texto dentro del cuadro. Luego, la etiqueta desaparece cuando comienza a escribir, dejando la etiqueta en su lugar el mayor tiempo posible antes de comenzar a escribir. Basecamp (basecamp.com) tiene un efecto realmente bueno que me gustaría emular, pero no estoy seguro de cómo lo están haciendo.

Cuando hace clic en un cuadro de texto que tiene una etiqueta dentro, la etiqueta no desaparece hasta que comienza a escribir. Eso es relativamente fácil de escribir, con un inconveniente: si hace clic dentro del cuadro de texto, su cursor podría aparecer en cualquier lugar dentro del texto de la etiqueta ... al principio, en el medio, al final. O incluso podría seleccionar uno o más caracteres en lugar de simplemente insertar el cursor en alguna parte.

En el sitio de Basecamp, no puede seleccionar ninguno de los textos de la etiqueta. No importa dónde haga clic, el cursor aparece en el extremo izquierdo (principio) del cuadro de texto. Incluso si hace doble clic, no seleccionará el texto de la etiqueta.

¿Cómo estan haciendo esto? Gracias.

0
BB Design 29 ago. 2014 a las 16:04

2 respuestas

La mejor respuesta

Simplemente use el atributo placeholder como se menciona en los comentarios anteriores. Un buen retroceso es https://github.com/mathiasbynens/jquery-placeholder

Además, si desea diseñar el marcador de posición en los navegadores modernos, puede usar lo siguiente:

::-webkit-input-placeholder {
   color: white; /* or any colour you like */
}

:-moz-placeholder { /* Firefox 18- */
   color: white;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: white;
}

:-ms-input-placeholder {
   color: white;
}
2
DavidT 29 ago. 2014 a las 12:09

¿Has intentado usar un marcador de posición como este?

<input type="text" id="exampleInput" placeholder="Enter some text">

Editar:

Mirando la página de inicio de sesión de basecamp, por ejemplo, parece que evitaron el marcador de posición y lo hicieron con CSS usando una clase de overLabel:

<label for="username" class="overlabel" style="">Username or email</label>
<input autocapitalize="off" autocomplete="on" autocorrect="off" class="overlayable"    id="username" name="username" title="Username or email" type="text">

body.login div.login_dialog span.overlay_wrapper label.overlabel {
    position: absolute;
    top: -2px;
    left: 6px;
    z-index: 1;
    color: #999 !important;
    font-size: 18px;
}

El marcador de posición funciona igual de bien IMO.

1
29 ago. 2014 a las 13:14