Вопрос по html, javascript – Событие Onclick для удаления значения по умолчанию в поле ввода текста

15

У меня есть поле ввода:

<input name="Name" value="Enter Your Name">

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

Насколько я знаю, Javascript - лучший способ сделать это. Если это не так, пожалуйста, сообщите мне.

Ваш Ответ

9   ответов
4

<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'; } " />
1

placeholder="your text" Вы могли бы также сделатьonclick="this.value='';

Так это будет выглядеть примерно так:

<input name="Name" value="Enter Your Name" onclick="this.value='';>
1

HTML

<input name="Name" value="Enter Your Name" onClick="blankDefault('Enter Your Name', this)">

JavaScript

function blankDefault(_text, _this) {
    if(_text == _this.value)
        _this.value = '';
}

Хотя есть и лучшие / менее навязчивые способы, но это сделает работу.

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededlittle bobby tablesError: User Rate Limit Exceeded
3

onclick="this.value=''":

<input name="Name" value="Enter Your Name" onclick="this.value=''">
44
HTML5 Placeholder Attribute

placeholder функциональность:

<input name="Name" placeholder="Enter Your Name" />
Polyfill for Older Browsers

Это не будет работать в некоторых старых браузерах, носуществуют полифилы (некоторым требуется jQuery, другим - нет) для исправления этой функциональности.

"Screw it, I'll do it myself."

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

<input name="Name" value="Enter Your Name"
       onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
       onblur="(this.value == '') && (this.value = 'Enter Your Name')" />
Avoid Mixing HTML with JavaScript

Вы обнаружите, что большинство из нас не являются большими поклонниками оценки JavaScript по таким атрибутам, какonblur а такжеonfocus, Вместо этого обычно рекомендуется связывать эту логику исключительно с помощью JavaScript. Конечно, это немного более многословно, но оно сохраняет хорошее разделение между вашей логикой и вашей разметкой:

var nameElement = document.forms.myForm.Name;

function nameFocus( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "Enter Your Name") element.value = "";
}

function nameBlur( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "") element.value = "Enter Your Name";
}

if ( nameElement.addEventListener ) {
  nameElement.addEventListener("focus", nameFocus, false);
  nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
  nameElement.attachEvent("onfocus", nameFocus);
  nameElement.attachEvent("onblur", nameBlur);
}

Демо-версия:http://jsbin.com/azehum/2/edit

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

placeholder это ответ. HTML5 для победы! Но для тех бедных несчастных людей, которые не могут полагаться на эту функциональность, взгляните на плагин jquery как на дополнение.HTML5 Заполнитель jQuery Плагин

<input name="Name" placeholder="Enter Your Name">
1

HTML 5 предлагает эту функцию, и это очень мило!

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

<input name="Name" placeholder="Enter Your Name">
2

и когда вы пишете текст в поле поиска, заполнитель будет скрыт. Спасибо

<input placeholder="Search" type="text" />
1
<input name="Name" value="Enter Your Name" onfocus="freez(this)" onblur="freez(this)">


function freez(obj)
{
 if(obj.value=='')
 {
   obj.value='Enter Your Name';
 }else if(obj.value=='Enter Your Name')
 {
   obj.value='';
 }
} 

Похожие вопросы