Me gustaría insertar un texto descriptivo dentro de un elemento de entrada que desaparece cuando el usuario hace clic en él.Cómo crear una etiqueta dentro de un elemento <input>?
Sé que es un truco muy común, pero no sé cómo hacer eso ..
¿Cuál es la mejor solución más simple /?
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">
¡Un mejor ejemplo sería el botón de búsqueda SO! De ahí obtuve este código. Ver la fuente de la página es una herramienta valiosa.
El enfoque común es utilizar el valor predeterminado como una etiqueta, y luego eliminarlo cuando el campo gana el foco.
Realmente no me gusta este enfoque ya que tiene implicaciones de accesibilidad y usabilidad.
En lugar de eso, comenzaría por usar un elemento estándar al lado del campo.
Entonces, si JavaScript está activo, establecer una clase sobre un elemento ancestro que hace que algunos de los nuevos estilos de aplicar ese:
Luego, y también cada vez que la entrada pierde el foco, pruebo para ver si la entrada tiene un valor. Si lo hace, asegúrese de que un elemento ancestro tenga una clase (por ejemplo, "etiqueta oculta"); de lo contrario, asegúrese de que no tenga esa clase.
Cuando la entrada gana el foco, configure esa clase.
La hoja de estilo usaría ese nombre de clase en un selector para ocultar la etiqueta (usando texto-sangría: -9999px, por lo general).
Este enfoque proporciona una experiencia decente para todos los usuarios, incluidos aquellos con JS deshabilitados y aquellos que utilizan lectores de pantalla.
Aquí hay un ejemplo simple, todo lo que hace es superponer una imagen (con la redacción que desee). Vi esta técnica en algún lado. Estoy usando la biblioteca de prototipos, por lo que necesitaría modificarla si usa algo más. Con la carga de la imagen después de window.load falla con gracia si javascript está deshabilitado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1;" />
<meta http-equiv="Expires" content="Fri, Jan 1 1981 08:00:00 GMT" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" />
<style type="text/css" >
input.searcher
{
background-image: url(/images/search_back.png);
background-repeat: no-repeat;
background-attachment: scroll;
background-x-position: left;
background-y-position: center;
}
</style>
<script type="text/javascript" src="/logist/include/scripts/js/prototype.js" ></script>
</head>
<body>
<input type="text" id="q" name="q" value="" />
<script type="text/javascript" language="JavaScript" >
// <![CDATA[
function f(e){
$('q').removeClassName('searcher');
}
function b(e){
if ($F('q') == '')
{
$('q').addClassName('searcher');
}
}
Event.observe('q', 'focus', f);
Event.observe('q', 'blur', b);
Event.observe(window, 'load', b);
// ]]>
</script>
</body>
</html>
En mi opinión, la mejor solución no incluye ni imágenes ni el uso del valor predeterminado de la entrada. Por el contrario, se parece algo a la solución de David Dorward.
Es fácil de implementar y degrada muy bien para los lectores de pantalla y los usuarios sin javascript.
Tome un vistazo a los dos ejemplos aquí: http://attardi.org/labels/
por lo general uso el segundo método (labels2) en mis formas.
la solución con las etiquetas detrás de una entrada transparente es en realidad la implementación más limpia de esto que jamás haya visto. – nailitdown
Esto es genial. ¡Gracias! –
Muy buena solución: más control sobre el aspecto y la sensación, sin preocuparse por la validación/forma interferente. – eddiegroves
uso este estilo
:
<style type="text/css">
.defaultLabel_on { color:#0F0; }
.defaultLabel_off { color:#CCC; }
</style>
html:
Javascript:
function defaultLabelClean() {
inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].value == inputs[i].getAttribute("innerLabel")) {
inputs[i].value = '';
}
}
}
function defaultLabelAttachEvents(element, label) {
element.setAttribute("innerLabel", label);
element.onfocus = function(e) {
if (this.value==label) {
this.className = 'defaultLabel_on';
this.value = '';
}
}
element.onblur = function(e) {
if (this.value=='') {
this.className = 'defaultLabel_off';
this.value = element.getAttribute("innerLabel");
}
}
if (element.value=='') {
element.className = 'defaultLabel_off';
element.value = element.getAttribute("innerLabel");
}
}
defaultLabelAttachEvents(document.getElementById('MYID'), "MYLABEL");
Sólo recuerde llamar defaultLabelClean función() sea antes enviar formulario.
buen trabajo
Si está utilizando HTML5, puede utilizar el atributo placeholder.
<input type="text" name="user" placeholder="Username">
+1. Esta respuesta debe indicar que esto es solo HTML5. – ripper234
Además, según [este sitio] (http://caniuse.com/input-placeholder), IE no admite esto incluso hasta IE9. – notan3xit
Acabo de escribir algo como https://github.com/serby/jquery.placeholder.js/blob/master/jquery.placeholder.js para esos navegadores. –
<input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">
añadir un evento onBlur también.
He creado soluciones propuestas por @Cory Walker con las extensiones de @Rafael y la bruja @TeX una forma era un poco complicado para mí y se le ocurrió una solución que es de esperar que
a prueba de errores con javascript y CSS deshabilitados.
Se manipula con el color de fondo del campo de formulario para mostrar/ocultar la etiqueta.
<head>
<style type="text/css">
<!--
input {position:relative;background:transparent;}
-->
</style>
<script>
function labelPosition() {
document.getElementById("name").style.position="absolute";
// label is moved behind the textfield using the script,
// so it doesnt apply when javascript disabled
}
</script>
</head>
<body onload="labelPosition()">
<form>
<label id="name">Your name</label>
<input type="text" onblur="if(this.value==''){this.style.background='transparent';}" onfocus="this.style.background='white'">
</form>
</body>
Ver la secuencia de comandos en acción: http://mattr.co.uk/work/form_label.html
Al comenzar a escribir se disappear.If vacío que aparecerá de nuevo.
<%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>
manera más simple ...
Por favor, use PlaceHolder.JS sus obras en todos los navegadores y muy fácil para los no HTML5 navegadores compatibles
Usted no necesita un código Javascript para eso. ..
Creo que te refieres al atributo marcador de posición. Aquí está el código:
<input type="text" placeholder="Your descriptive text goes here...">
El texto por defecto será de color gris-ish y al hacer clic, que desaparecerá!
Una pista sobre la propiedad HTML marcador de posición y el área de texto de etiqueta , por favor asegúrese de que no hay algún espacio entre <textarea> y </textarea>, de lo contrario el marcador de posición no funciona, por ejemplo:
<textarea id="inputJSON" spellcheck="false" placeholder="JSON response string" style="flex: 1;"> </textarea>
Esto no funcionará, porque hay un espacio entre ...
Para el registro, la solución http://attardi.org/labels/ sugerida por Tex es en realidad mejor que la de Cory Walker. – nailitdown
Horrible UX, probado una y otra vez. – Rudie
La imagen no funcionó. Lo borró de la publicación. Todavía está disponible en [revisión 3] (http://stackoverflow.com/revisions/781473/3). – Shimmy