De ver estos cuadros de texto de vez en cuando en la web: una etiqueta gris se muestra el interior de la caja, pero una vez que usted escriba allí, el texto en gris desaparece. Esta página tiene incluso uno: el campo «Título» se comporta exactamente igual que.

Así, las preguntas:

  1. Hay un término estándar para esto? Realmente estoy luchando por encontrar nada en google

  2. Se puede hacer con CSS?

  3. En su defecto, se puede hacer con localizadas JavaScript? (es decir, el código dentro de la etiqueta, no en el encabezado HTML).

  • No sé si hay un hecho universalmente aceptado término para esto, pero al menos las llamadas de API de Windows estos cue banners.
  • Debe ser el cuadro de entrada valor por defecto. CSS-sólo [no], JavaScript [sí]
  • Marcador de posición de texto debe ser un término mejor
  • Jiang: Eso suena razonable demasiado, aunque supongo que Microsoft con la intención de llamar a ellos cue banners de sugerir que el texto es una señal para el usuario decirles lo que tienen que entrar.
  • ah, utilizando el término «cue lema» ayuda a encontrar esta cerca de duplicar la pregunta: stackoverflow.com/questions/1156966/…

7 Comentarios

  1. 7

    La "placeholder" atributo es ahora soportados con todos los principales navegadores.

    <form>
    <input type="text" placeholder="placeholder text">
    </form>

    El estilo que todavía parece exigir al proveedor de servicios prefijos:

    input::-webkit-input-placeholder {
        color: #59e;
    }    
    input:-moz-placeholder {  
        color: #59e;  
    }
    

    Visto aquí: http://jsfiddle.net/webvitaly/bGrQ4/2/

    • Gracias por este. Funciona bien en up-to-fecha de los navegadores. El aceptó la respuesta es un poco anticuado. O el uso de este directamente con CSS en línea para casos generales: <input type=»text» name=»nombre» style=»-webkit-de entrada-marcador de posición: color: #555;» placeholder=»escriba cosas aquí»/>
    • Gracias por la sugerencia. 🙂
  2. 6

    Yo no conozco una manera de hacerlo con CSS. Pero mirando el código fuente de la página, de MODO que lo está haciendo de esa manera-sabio:

    <input name="q" class="textbox" tabindex="1" 
           onfocus="if (this.value=='search') this.value = ''" 
           type="text" maxlength="80" size="28" value="search">

    El medio de la línea que comienza con «onfocus» es donde el trabajo está sucediendo. Cuando el campo de texto obtiene el foco, se comprueba si el valor predeterminado («búsqueda») está ahí. Si es así, se establece el valor a » (cadena vacía). De lo contrario, el texto no se ve afectada.

    Un posible problema aquí es que si alguien está tratando de buscar la palabra «buscar», a continuación, hace clic fuera de la caja y hace clic de nuevo, el texto se restablece. No es un gran problema, pero es algo a tener en mente cuando usted está trabajando.

    • Estoy sorprendido de lo que en realidad LO hace de esta manera. Un mejor método sería el uso de una bandera en lugar de comparar directamente el texto.
    • Hay algunos cuestionable frente a fin de cosas en la fuente – probablemente hecho para la velocidad de desarrollo a más largo plazo de la capacidad de mantenimiento.
    • ASÍ que no se preocupa por los estándares o mejores prácticas. Las tablas se utilizan en todas partes, incluso en lugares donde las listas sería mejor. En línea de Javascript demasiado, incluso cuando es trivial hacerlo de otra manera.
    • Supongo que he estado ocupado con otras cosas. los chicos no exactamente se siente todavía…
    • Estoy de acuerdo. Por LO que pueden tener algunos bastante raros código. Basado en el código, si usted está buscando para la «búsqueda» y accidentalmente haga clic fuera del cuadro de texto, la próxima vez que haga clic en él, estará en blanco.
    • Jiang – no puede ser como la onu-SECO como parece. Es posible que tenga algo en el lado del servidor que genera cuadros de búsqueda, y es fácil cambiar de una línea o dos de sus backend código para actualizar cada cuadro de búsqueda a la vez.Quién sabe? A menos que Jeff o alguien viene y nos dice, sólo estoy especulando.
    • Usted podría estar en lo correcto sobre el cuadro de búsqueda, pero las tablas de la lista… vamos, seguramente no hay excusa para usar eso! El código es casi la misma, pero con listas de obtener los dos mejores de la semántica y menos marcado.
    • Mi conjetura es que ellos realmente no se preocupan, el ad-ingresos está haciendo rico. Si funciona y no es menos segura, ¿por qué invertir tiempo, dinero, o el estrés? También, como se dijo antes, de MODO que los programadores no son los mejores que he tenido más problemas de inyección de hacks.

  3. 4

    Si quieres que este con HTML + CSS sólo, puede probar a usar el nuevo HTML5 placeholder atributo de entrada. Por desgracia, este atributo no está ampliamente soportado, así que trate de usar una secuencia de comandos como Modernizr para detectar el navegador soporte para esta característica para una función como esta.

    Yo no recomendaría el uso en línea de Javascript para esto – es una mala práctica y va contra el principio de separación de contenido y comportamiento. El uso de jQuery, por ejemplo, algo como esto funciona:

    var input = $('input[name="search"]');
    var placeHolder = input.attr('placeholder');
    
    input.val(placeHolder);
    
    input.focus(function(){
        this.value = '';
    }).blur(function(){
        if(this.value === '') this.value = placeHolder;
    });
    • Es más complicado que eso. ¿Qué sucede si el formulario es enviado antes de que un usuario introduce un valor en la entrada? Su sugerencia es presentado…así que asegúrese de cuenta de ello. También si después de hacer la validación del formulario, necesitan más que la lógica de verificación de los campos vacíos. etc.
  4. 2

    Hay un HTML integrado para los nuevos navegadores.

    Solo uso el «marcador de posición» atributo:

    < input id=»inputbox» type=»text» placeholder=»Texto de la Sugerencia Aquí» >

  5. 1
    1. Llamo etiquetas de entrada. no sé si se trata de un estándar
    2. Nada de eso – podría si se les permitiera a los elementos secundarios como
    input {
        position: relative;
    }
    
    input label {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    input:focus label {
        display: none;
    }

    Pero que no pueden tener hijos de los insumos (AFAIK), por lo que no funciona.

    1. Sí, ver el enlace de arriba (usando jQuery, pero trivialmente hecho sin)
  6. 1

    Es probable que ya hayas encontrado la respuesta que busca, pero para otros esto puede ayudar a

    <script>
        function inputFocus(i){
            if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
        }
        function inputBlur(i){
            if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
        }
    </script>

    <input type ="text"onfocus="inputFocus(this)" onblur="inputBlur(this)" value="Some Text"/>

    espero que esto ayude

Dejar respuesta

Please enter your comment!
Please enter your name here