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>