html - tamaño - estilos css para input text

HTML/CSS Hacer un cuadro de texto con texto que está atenuado y desaparece cuando hago clic para ingresar información, ¿cómo?

Question

¿Cómo hago un cuadro de texto que tiene un contenido atenuado y cuando lo presiono para ingresar texto, la parte atenuada, desaparece y me permite ingresar el texto deseado?

Ejemplo:

Un cuadro de texto de "Nombre". Las palabras "Nombre" están dentro del cuadro de texto atenuado, cuando hago clic, esas palabras desaparecen y escribo mi nombre en él.

Answer 1

Chrome, Firefox, IE10 y Safari admiten el atributo de marcador de posición html5

<input type="text" placeholder="First Name:" />

Para obtener una solución más cross browser necesitarás usar JavaScript, hay muchas soluciones prefabricadas, aunque no conozco ninguno.

http://www.w3schools.com/tags/att_input_placeholder.asp

Answer 2

Con HTML5, puede hacer esto de forma nativa con: <input name="first_name" placeholder="First Name">

Esto no es compatible con todos los navegadores (IE)

Esto puede funcionar:

<input type="first_name" value="First Name" onfocus="this.value==this.defaultValue?this.value='''':null">

De lo contrario, si está utilizando jQuery, puede usar .focus y .css para cambiar el color.

Answer 3

Esta es una versión elaborada, para ayudarte a entender

function setVolatileBehavior(elem, onColor, offColor, promptText){
elem.addEventListener("change", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='''';
        elem.style.color = onColor;
    }
    else if (elem.value==''''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("blur", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='''';
        elem.style.color = onColor;
    }
    else if (elem.value==''''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.addEventListener("focus", function(){
    if (document.activeElement == elem && elem.value==promptText){
        elem.value='''';
        elem.style.color = onColor;
    }
    else if (elem.value==''''){
        elem.value=promptText;
        elem.style.color = offColor;
    }
});
elem.value=promptText;
elem.style.color=offColor;
}

Use esto:

setVolatileBehaviour(document.getElementById(''yourElementID''),''black'',''gray'',''Name'');

Answer 4

La forma más rápida es agregar directamente el código siguiente como atributos adicionales en el tipo de entrada que desea cambiar.

onfocus="if(this.value==''Search'')this.value=''''" 
onblur="if(this.value=='''')this.value=''Search''"

Tenga en cuenta: cambie el texto "Buscar" por "ir" o cualquier otro texto que se ajuste a sus necesidades.

Answer 5

Puedes usar la solución de Floern. Es posible que también desee deshabilitar la entrada mientras configura el color en gris. http://www.w3schools.com/tags/att_input_disabled.asp

Answer 6

Si solo se orienta a HTML5, puede usar:

<input type="text" id="firstname" placeholder="First Name:" />

Para navegadores que no sean HTML5, me basaría en la respuesta de Floern al usar jQuery y hacer que el javascript no resulte ofensivo. También usaría una clase para definir las propiedades borrosas.

$(document).ready(function () {

    //Set the initial blur (unless its highlighted by default)
    inputBlur($(''#Comments''));

    $(''#Comments'').blur(function () {
        inputBlur(this);
    });
    $(''#Comments'').focus(function () {
        inputFocus(this);
    });

})

Funciones:

function inputFocus(i) {
    if (i.value == i.defaultValue) {
        i.value = "";
        $(i).removeClass("blurredDefaultText");
    }
}
function inputBlur(i) {
    if (i.value == "" || i.value == i.defaultValue) {
        i.value = i.defaultValue;
        $(i).addClass("blurredDefaultText");
    }
}

CSS:

.blurredDefaultText {
    color:#888 !important;
}

Answer 7

Esta respuesta ilustra un enfoque anterior a HTML5. Por favor, eche un vistazo a la respuesta de Psytronic para una solución moderna que utiliza el atributo placeholder .

HTML:

<input type="text" name="firstname" title="First Name" style="color:#888;" 
    value="First Name" onfocus="inputFocus(this)" onblur="inputBlur(this)" />

JavaScript:

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"; }
}

Answer 8

Esto funciona:

<input type="text" id="firstname" placeholder="First Name" />

Nota: Puede cambiar el marcador de posición, el id y el tipo de valor para "correo electrónico" o lo que sea que se ajuste a sus necesidades.

Más detalles por W3Schools en: http://www.w3schools.com/tags/att_input_placeholder.asp

Pero, con mucho, las mejores soluciones son de Floern y Vivek Mhatre (editado por j0k)

Tengo un fragmento de código a continuación, que es una página web típica.

.Submit {
    background-color: #008CBA;
    border: 3px;
    color: white;
    padding: 8px 26px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}
div {
  background-color: yellow;
  }

<div>
  <center>
  <p>Some functions may not work, such as the css ect.
  <p>First Name:<input type="text" id="firstname" placeholder="John" />
  <p>Surname:<input type="text" id="surname" placeholder="Doe" />
  <p>Email:<input type="email" id="email" placeholder="[email protected]" />
  <p>Password:<input type="email" id="email" placeholder="[email protected]" />
  <br /><button class="submit">Submit</button>                 </center>
</div>