Me gustaría insertar un texto descriptivo en el interior de un elemento de entrada que disappers cuando el usuario haga clic en él.

Sé que es un muy común truco, pero no sé cómo hacerlo..

¿Cuál es la más simple/mejor solución?

  • Para el registro, el attardi.org/labels solución sugerida por Tex es realmente mejor que la de Cory Walker.
  • Horrible UX, demostrado una y otra vez.
  • La imagen no funciona. Borrado de post. Disponible en revisión 3.
InformationsquelleAutor collimarco | 2009-04-23

13 Comentarios

  1. 45
    <input name="searchbox" onfocus="if (this.value=='search') this.value = ''" type="text" value="search">

    Un mejor ejemplo podría ser el botón de búsqueda! Que es donde tengo este código. Ver código fuente de la página es una herramienta valiosa.

    • Un buen pensamiento de su parte!
    • Ligera extensión para su solución: <input name=»q» class=»textbox» onfocus=»si (a esto.value==’buscar’) esto.valor = «» onblur=»si (a esto.value==») de este.value = «buscar «» type=»text» value=»buscar»>
    • Puede utilizar la propiedad defaultValue, por lo que tendrás que escribir el texto de la etiqueta sólo una vez (en el atributo value), no tres veces, en el código: <input type=»text» value=»Buscar» onfocus=»si(a esto.valor==este.defaultValue)este.valor=»» onblur=»si(a esto.value==»)de este.valor=este.defaultValue»>
  2. 118

    Si usted está usando HTML5, puede utilizar el placeholder atributo.

    <input type="text" name="user" placeholder="Username">

  3. 37

    En mi opinión, la mejor solución consiste ni imágenes ni con el uso de la entrada del valor predeterminado. Más bien, se ve algo como David Dorward la solución.

    Es fácil de implementar y se degrada muy bien para los lectores de pantalla y los usuarios sin javascript.

    Echa un vistazo a los dos ejemplos aquí:
    http://attardi.org/labels/

    Yo suelo usar el segundo método (labels2) en mis formularios.

    • la solución con las etiquetas detrás de un transparente de entrada es en realidad el más limpio de aplicación de la presente que he visto nunca.
    • Esto es genial. Gracias!
    • Muy bonita la solución más control sobre el aspecto y la sensación, que no hay que preocuparse acerca de la validación/formulario post de interferencia.
    • Gracias! Buscando una solución para satisfacer un requisito de acceso. Utilizando el valor de marcador de posición y los atributos aparentemente no eran suficientes. -_-
  4. 4

    El enfoque común es utilizar el valor predeterminado como una etiqueta y retírela cuando el campo recibe el foco.

    Realmente no me gustan este enfoque, ya que tiene la accesibilidad y la usabilidad implicaciones.

    Lugar, me gustaría empezar por el uso de un elemento estándar junto al campo.

    Entonces, si JavaScript está activo, una clase en un ancestro elemento que hace que algunos de los nuevos estilos de aplicar que:

    • Relativamente colocar un div que contiene la entrada y la etiqueta
    • Absolutamente posición de la etiqueta
    • Absolutamente posición de la entrada en la parte superior de la etiqueta
    • Eliminar las fronteras de la entrada y el conjunto de su background-color transparente

    Entonces, y también cada vez que la entrada pierde el foco, puedo probar a ver si la entrada tiene un valor. Si lo hace, asegúrese de que un antepasado elemento tiene una clase (por ejemplo, «ocultar-label»), de lo contrario, asegúrese de que no tiene esa clase.

    Siempre que la entrada recibe el foco, conjunto de la clase.

    La hoja de estilos utilizaría que classname en un selector para ocultar la etiqueta (utilizando text-indent: -9999px; por lo general).

    Este enfoque proporciona una experiencia decente para todos los usuarios, incluidos aquellos con JS discapacitados y las personas que utilizan lectores de pantalla.

  5. 2

    He puesto juntos soluciones propuestas por
    @Cory Walker con las extensiones de @Rafael
    y la forma @Tex bruja era un poco complicado para mí
    y vino para arriba con una solución que es de esperar que

    a prueba de errores con javascript y CSS desactivada.

    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

  6. 1
    <input name="searchbox" onfocus="if (this.value=='search') this.value = ''" onblur="if (this.value=='') this.value = 'search'" type="text" value="search">

    Agregar un evento onblur demasiado.

  7. 1

    Cuando empieza a escribir que va a desaparecer.Si está vacío aparecerá de nuevo.

            <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:[email protected]"%>

    Forma más sencilla…

  8. 1

    Una pista acerca de HTML propiedad marcador de posición y la etiqueta de textarea, por favor asegúrese de que no hay ningú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 funciona, porque hay un espacio entre…

  9. 0

    utilizar 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 a defaultLabelClean función() antes de enviar el formulario.

    buen trabajo

  10. 0

    Usted no necesita un código de Javascript para que…

    Creo que te refieres al atributo placeholder. Aquí está el código:

    <input type="text" placeholder="Your descriptive text goes here...">

    El texto predeterminado será gris-ish y cuando se hace clic, va a desaparecer!

  11. -2

    Aquí está un ejemplo simple, todo lo que hace es superponer una imagen (con cualquier texto que usted quiera). Vi esta técnica en algún lugar. Estoy utilizando el prototipo de biblioteca por lo que tendría que modificar si el uso de algo más. Con la carga de imágenes después de la ventana.la carga de falla correctamente 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>

Dejar respuesta

Please enter your comment!
Please enter your name here