Cómo crear una etiqueta dentro de un <input> elemento?

StackOverflow https://stackoverflow.com/questions/781473

  •  13-09-2019
  •  | 
  •  

Pregunta

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 el más simple/mejor solución?

¿Fue útil?

Solución 

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

Un mejor ejemplo sería el botón para buscar! Ahí es donde me dieron el código de. Viendo el origen de la página es una herramienta valiosa.

Otros consejos

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

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

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

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

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

Yo suelo utilizar el segundo método (labels2) en mis formas.

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.

En su 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 de 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 color de fondo transparente

A continuación, 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.

He creado soluciones propuestas por @Cory Walker con las extensiones de @Rafael y la bruja @TeX una forma fue un poco complicado para mí y se acercó con una solución que es de esperar

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 

<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.

Al comenzar a escribir se disappear.If vacío que aparecerá de nuevo. 

        <%= f.text_field :user_email,:value=>"",:placeholder => "Eg:abc@gmail.com"%>

La manera más sencilla ...

Utilice PlaceHolder.JS sus obras en todos los navegadores y muy fácil para los navegadores compatibles con HTML5 no   http://jamesallardice.github.io/Placeholders.js/

Una pista sobre la propiedad HTML marcador de posición y la etiqueta área de texto , 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 funcionará, porque hay un espacio entre ...

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 defaultLabelClean () función antes de Enviar.

buen trabajo

No es necesario un código Javascript para eso ...
Creo que significa el 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á!

Creo que es bueno para mantener la etiqueta y no utilizar marcador de posición como se mencionó anteriormente. Es bueno para UX como explican aquí: https://www.smashingmagazine.com/2018/03 / UX-contacto-Forms-esenciales-conversiones /

Aquí ejemplo, con etiqueta dentro de los campos de entrada:  codepen.io/jdax/pen/mEBJNa

Este es un ejemplo simple, todo lo que hace es superponer una imagen (con cualquier fraseología usted quiere). Vi esta técnica en alguna parte. Estoy usando la biblioteca prototipo de lo que sería necesario modificar si se utiliza alguna otra cosa. 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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top