Что будет CSS этого поля ввода?

Question

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

когда я щелкаю по нему, если я ничего не ввел "введите свое имя" возвращается.

каково будет решение этой проблемы? это только CSS? или JavaScript?

Answer 1

попробуйте это:

<input name="textfield1" type="text" class="login_te" value="enter you name" onblur="if(this.value=='')this.value='enter you name';" onfocus="if(this.value=='enter you name')this.value='';" />

Answer 2

Просто используйте это

<input type="text" value="Enter Your Name" onfocus="if (this.value == 'Enter Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Name';}">

Надеюсь на помощь

Answer 3

Вы смотрели на атрибут HTML5 placeholder ?

Answer 4

Если вы используете тип документа html5 на своих страницах, это просто

<input type="text" name="first_name" placeholder="Enter your name">

Используйте атрибут placeholder, и любой современный браузер сделает все остальное.*

Если браузер не поддерживает атрибут placeholder, вам необходимо использовать javascript.

Answer 5

Это не вещь CSS

Вы можете просто использовать:

<input type="text" value="Enter Your Name" onfocus="if (this.value == 'Enter Your Name') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Enter Your Name';}">

Если вы разрабатываете для современных браузеров, которые поддерживают HTML5, вы можете просто использовать что-то вроде этого:

<input type="text" placeholder="Enter Your Name" />

Таким образом, когда поле будет сфокусировано, текст исчезнет

Теперь, чтобы заставить его работать на старых браузерах, вы можете использовать этот плагин jQuery под названием HTML5 Forms .Также добавлена ​​поддержка множества форм HTML5 в старых браузерах.

Answer 6

Обычно это делается с помощью JavaScript, но если вы против использования JavaScript, вы можете использовать фоновое изображение с надписью «Введите ваше имя», и оно исчезнет, ​​когда поле будет сфокусировано.

input#namefield {
    background: url(enter_your_name.png);
}

input#namefield:focus {
    background-image: none;
}

Answer 7

Если я понял ваш вопрос, вы хотите скрыть всю строку ввода.Вы должны использовать javascript в сочетании с css.

document.getElementById("id").style.display = "none";

скроет div, содержащий ваше поле ввода

document.getElementById("id").style.display = "block";

снова покажет ваш div.Все, что вам нужно сделать, это скопировать эти два фрагмента в события javascript, которые вы предпочитаете.

Answer 8

Вы должны использовать JavaScript:

<input type="text" value="Click..." onfocus="if(this.value == 'Click...')this.value='';" onblur="if(this.value == '')this.value='Click...';" />

Answer 9

Используйте атрибут placeholder .

К сожалению, он поддерживается не во всех браузерах.

Поэтому вы должны использовать откат JavaScript, чтобы он работал вэти браузеры.Я рекомендую это:

https://github.com/mathiasbynens/Placeholder-jQuery-Plugin

Взгляните на демонстрацию в браузере, который поддерживает placeholder, например Chrome, а затем в браузере, который не поддерживает IE9:

http://mathiasbynens.be/demo/placeholder