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

Question

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

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

пример:

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

523 8

html css textbox

8 ответов:

Comments

Ничего не найдено.

Floern · Accepted Answer · 2018-03-08 14:07:28

этот ответ иллюстрирует подход до HTML5. Пожалуйста, взгляните на ответ Psytronic для современного решения с помощью .

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

Psytronic · Accepted Answer · 2016-09-08 14:58:37

Chrome, Firefox, IE10 и Safari поддерживают атрибут заполнителя html5

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

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

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

David Houde · Accepted Answer · 2011-01-13 16:25:58

С 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, вы можете использовать .фокус и. css для изменения цвета.

Jay1b · Accepted Answer · 2014-08-08 16:16:42

если вы ориентируетесь только на 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;
}

Vivek Mhatre · Accepted Answer · 2012-11-07 10:50:05

самый короткий путь-добавить код ниже в качестве дополнительных атрибутов в типе ввода, который вы хотите изменить.
onfocus="if(this.value=='Search')this.value=''" 
onblur="if(this.value=='')this.value='Search'"
обратите внимание: измените текст "поиск" на " go " или любой другой текст в соответствии с вашими требованиями.

PiggyPlex · Accepted Answer · 2017-01-05 19:18:06

это работает:
<input type="text" id="firstname" placeholder="First Name" />
Примечание: вы можете изменить заполнитель, идентификатор и значение типа на "электронная почта" или все, что соответствует вашим потребностям.

больше деталей 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>

UltraInstinct · Accepted Answer · 2011-01-13 16:29:04

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

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');

stoneMonkey77 · Accepted Answer · 2011-01-13 16:29:20

вы можете использовать решение Floern. Вы также можете отключить ввод, когда вы устанавливаете цвет на серый. http://www.w3schools.com/tags/att_input_disabled.asp