Ввод значения поля поля javascript

Я делаю простую форму, и у меня есть этот код, чтобы очистить начальное значение:

JavaScript:

function clearField(input) {
    input.value = "";
};

HTML:

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);"/>

Но я не хочу, чтобы пользователь заполнил ввод, но снова щелкнул его, и он стирается. Я хочу, чтобы в поле было значение стартера "Имя", только если вход пуст. Заранее благодарю вас!

Ответы

Ответ 1

Вот одно решение с jQuery для браузеров, которые не поддерживают атрибут placeholder.

$('[placeholder]').focus(function() {
  var input = $(this);

  if (input.val() == input.attr('placeholder')) {
    input.val('');
    input.removeClass('placeholder');
  }
}).blur(function() {
  var input = $(this);

  if (input.val() == '' || input.val() == input.attr('placeholder')) {
    input.addClass('placeholder');
    input.val(input.attr('placeholder'));
  }
}).blur();

Найдено здесь: http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html

Ответ 2

делать

<input name="name" id="name" type="text" value="Name" 
   onblur="fillField(this,'Name');" onfocus="clearField(this,'Name');"/>

и js

function fillField(input,val) {
      if(input.value == "")
         input.value=val;
};

function clearField(input,val) {
      if(input.value == val)
         input.value="";
};

Обновление

здесь демонстрационная скрипта того же

Ответ 3

Это может быть то, что вы хотите:

Работает jsFiddle здесь

  • Этот код помещает текстовую строку по умолчанию Enter your name here внутри текстового поля <input> и окрашивает текст в светло-серый.

  • Как только щелкнет окно, текст по умолчанию очищается, а цвет текста установлен на черный.

  • Если текст стирается, текстовая строка по умолчанию заменяется и светло-серый цвет reset.

HTML:

<input id="fname" type="text" />

JQuery/JavaScript:

$(document).ready(function() {

    var curval;
    var fn = $('#fname');
    fn.val('Enter your name here').css({"color":"lightgrey"});

    fn.focus(function() {
        //Upon ENTERING the field
        curval = $(this).val();
        if (curval == 'Enter your name here' || curval == '') {
            $(this).val('');
            $(this).css({"color":"black"});
        }
    }); //END focus()

    fn.blur(function() {
        //Upon LEAVING the field
        curval = $(this).val();
        if (curval != 'Enter your name here' && curval != '') {
            $(this).css({"color":"black"});
        }else{
            fn.val('Enter your name here').css({"color":"lightgrey"});
        }
    }); //END blur()

}); //END document.ready

Ответ 4

HTML:

<input name="name" id="name" type="text" value="Name" onfocus="clearField(this);" onblur="fillField(this);"/>

JS:

function clearField(input) {
  if(input.value=="Name") { //Only clear if value is "Name"
    input.value = "";
  }
}
function fillField(input) {
    if(input.value=="") {
        input.value = "Name";
    }
}