JQuery Empty Текстовое поле Когда я нажимаю на него

Question

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

Псевдо Код:

On click #searchform 
Erase String in #searchform 

Answer 1

Try it here

$('#searchform').click(function() { 
    if ($(this).val() == 'Enter search term') { 
     $(this).data('original', $(this).val()).val(''); 
    } 
}); 

$('#searchform').blur(function() { 
    if ($(this).val() == '') { 
     $(this).val($(this).data('original')); 
    } 
}); 

EDIT В настоящее время вы должны использовать атрибут placeholder и если вы хотите, используйте выше как polyfill пропавших без вести поддержка заполнителя.

if (!('placeholder' in document.createElement('input'))){ 
    $('input[placeholder]').each(function() { 
     $(this).placeholder(); 
    }); 
} 

И превратите исходный код в плагин для удобства использования (с некоторыми небольшими модами).

jQuery.fn.placeholder = function() { 
    return this.each(function() { 
     var value = $(this).attr('placeholder'); 
     jQuery(this).val(value).addClass('placeholder'); 
     jQuery(this).focus(function() { 
      if (jQuery(this).val() == value) { 
       jQuery(this).val('').removeClass('placeholder'); 
      } 
     }); 

     jQuery(this).blur(function() { 
      if (jQuery(this).val() == '') { 
       jQuery(this).val(value).addClass('placeholder'); 
      } 
     }); 
    }); 
}; 

Answer 2

$('#searchform').click(function() { $(this).val('') }) 

Answer 3

Если вы желаете, чтобы очистить значение по умолчанию из поля, такие как «Введите искомое слово» Я использую следующий код:

function clearText(thefield){ 
if (thefield.defaultValue==thefield.value) 
thefield.value = "" 
} 

, а затем на моем поле ввода я добавляю:

onfocus="clearText(this)" 

Так было бы:

<input type="text" name="username" value="enter your name here" onfocus="clearText(this)"> 

Answer 4

Я бы рекомендовал вам использовать атрибут placeholder HTML5. Например:

<input type="text" placeholder="some default string if empty" /> 

Это будет работать с большинством из новейших браузеров и старых есть обходной путь JQuery плагин. Вот ссылка на placeholder plugin.

И тогда вы просто звоните:

$('input[placeholder]').placeholder();