HTML/CSS Создание текстового поля с серым цветом и исчезает, когда я нажимаю для ввода информации, как?

Как создать текстовое поле с серым контентом, и когда я нажимаю на него, чтобы ввести текст, выделенную часть, он исчезает и позволяет мне вводить нужный текст?

Пример:

A "Имя". Слова "Имя" находятся внутри текстового поля, выделенного серым цветом, когда я нажимаю, эти слова исчезают, и я пишу свое имя в нем.

Ответы

Ответ 1

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

Изменить: это на самом деле проще.

Ответ 2

Chrome, Firefox, IE10 и Safari поддерживают атрибут html5 placeholder

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

Чтобы получить более кросс-браузерное решение, вам нужно будет использовать некоторый javascript, есть много готовых решений там, хотя я не знаю ничего с головы.

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

Ответ 3

С HTML5 вы можете сделать это изначально: <input name="first_name" placeholder="First Name">

Это не поддерживается всеми браузерами (IE)

Это может работать:

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

В противном случае, если вы используете jQuery, вы можете использовать .focus и .css для изменения цвета.

Ответ 4

Если вы настроили таргетинг только на HTML5, вы можете использовать:

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

Для браузеров, не поддерживающих HTML5, я бы построил на Floern-ответ, используя jQuery и сделав javascript ненавязчивым. Я бы также использовал класс для определения размытых свойств.

$(document).ready(function () {

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

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

})

Функции:

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

Ответ 5

Самый короткий путь заключается в том, чтобы непосредственно добавить приведенный ниже код в качестве дополнительных атрибутов в типе ввода, который вы хотите изменить.

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

Обратите внимание: измените текст "Поиск" на "идти" или любой другой текст в соответствии с вашими требованиями.

Ответ 6

Это сложная версия, которая поможет вам понять

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

Используйте это:

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

Ответ 7

Это работает:

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

Примечание. Вы можете изменить значение placeholder, id и type для "электронной почты" или того, что вам подходит.

Подробнее от W3Schools по адресу: http://www.w3schools.com/tags/att_input_placeholder.asp

Но, безусловно, лучшие решения - это Floern и Vivek Mhatre (отредактированные j0k)

У меня есть фрагмент кода ниже, это типичная веб-страница.

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