2010-08-10 27 views
10

¿Cuál es la mejor manera de tener un campo de entrada de texto que muestre las instrucciones de qué se debe ingresar en ese campo en gris. Cuando se enfoca en ese campo de entrada, el texto de instrucción gris desaparece y el texto de entrada aparece en negro. Si borra su texto de entrada y se aleja de esa entrada, reaparece el texto gris de instrucciones.Campos de entrada de texto de Javascript que muestran texto de instrucciones (marcador de posición)

He intentado implementar esto con jQuery, pero recibo todo tipo de problemas extraños con diferentes navegadores. A veces, cuando retrocedes en una pantalla, el texto de la instrucción se vuelve negro y ya no desaparece, problemas como ese.

¿Hay una biblioteca javascript estándar para esto? No puedo encontrar ninguno!

Ah, y el texto de la instrucción no puede ser una imagen porque debe estar disponible en diferentes idiomas según la preferencia de idioma del navegador.

Respuesta

7

Puede utilizar el plugin marca de agua en jquery.use this enlace.

ejemplo

$(this).Watermark("your instructions"); 
+0

¡Esto es perfecto, gracias! –

-2
<input type="text" name="myText" value="Enter Name" style="color:gray" onfocus="this.value=''"> 
+2

esto pasa por alto la mayor parte de los requisitos de la cuestión y tiene problemas de accesibilidad. – Quentin

+1

Esto no funcionará. Porque después de enfocarte en este campo, el texto de instrucciones desaparecerá para siempre. –

+0

Lo siento muchachos. Pensé de la manera incorrecta. – ppshein

0

Haga que la entrada sea transparente y coloque el texto detrás de ella. Verifique el valor en carga, onblur para decidir si el texto debe ser visible o no. Hazlo invisible en el foco.

Por ejemplo: http://dorward.me.uk/tmp/label-work/example.html (sólo tiene que el estilo de la etiqueta y de entrada con diferentes colores de primer plano)

+0

Me encanta esta idea. El texto de instrucción también es indexable, lo cual tiene sentido. Sin embargo, utilicé el complemento de jQuery Watermark porque era muy simple y hacía que html estuviera tan limpio. Por lo que sé, implementaron esto con el mismo mecanismo ... –

2

html

<input type="text" id="user" class="textbox default" value="Enter login name"> 
<input type="password" id="pass" class="textbox"> 

jQuery

$(function(){ 
    $('.textbox').focus(function(){ 
    if (this.value == this.defaultValue) { 
     this.value = ''; 
     $(this).removeClass('default'); 
    }; 
    }).blur(function(){ 
    if (this.value == '') { 
     this.value = this.defaultValue; 
     $(this).addClass('default'); 
    }; 
    });​ 
}); 

demo

21

No necesita javascript para esto.

HTML5:

<input type="text" id="email" name="email" placeholder="Enter your email address"> 

Esto funciona en los navegadores modernos. Si agrega modernizr.js a su página, funcionará en todos los navegadores.

+0

Según entiendo, modernizr solo detecta si existe una característica html5 como marcador de posición en el navegador actual. Depende de usted proporcionar un mecanismo de respaldo. La biblioteca jquery de arriba elegí porque la respuesta correcta en realidad usa el atributo de marcador de posición de html5 (si lo desea) y recurre a su mecanismo javascript. –

0

código de marcador de posición - nombre

nombre de la variable es,

var name=$("#con-name"); 
var nameval="Enter your name"; 



name.val(nameval); 
name.focus(function(){ 
    if (this.value == nameval) { 
     this.value = ''; 
    }; 
    }).blur(function(){ 
     if (this.value == '') {  
     this.value = nameval; 
    }; 
}); 
//submit to clear code 
$("#sub_con_page").click(function() { 
    if(name.val()==nameval) { 
     name.val(""); 
    } 
}); 

DEMO LINK

Cuestiones relacionadas