Могу ли я использовать jquery для очистки полей textarea или ajax-подобных полей ввода?

Question

Я всегда использую этот фрагмент в своей работе:

<input type="text" onblur="if (this.value=='') { this.value='your email'; }" onfocus="if (this.value == 'your email') { this.value=''; }" value="your email" /> 

В основном это будет показывать текстовое поле с "вашим адресом электронной почты" в качестве значения, когда щелкает поле ввода текста - значение становится пустым.Таким образом, они вводят свою электронную почту. Если они не вводят электронную почту, она будет сброшена обратно до «вашей электронной почты».

Я хочу сделать это или подобное с textarea и преобразовать его в jQuery (такжеприведенный выше код в jQuery)?

<textarea name="msg">Message:</textarea><br />

Answer 1

Это должно сработать:

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

См. Скрипку здесь: http://jsfiddle.net/leifparker/DvqYU/2/

(Это извлекает и сохраняет значение по умолчанию в атрибуте данных)

HTML

<textarea>I love bananas ..</textarea>
<textarea>How about you?</textarea>
<input type="text" value="Time for a bath ..">
<input type="text" value=".. because I smell">

JS

$('textarea, input[type=text]')
    .each(function(){ 
        $(this).data('defaultText', $(this).val());
    })
    .focus(function(){
        if ($(this).val()==$(this).data('defaultText')) $(this).val('');
    })
    .blur(function(){
        if ($(this).val()=='') $(this).val($(this).data('defaultText'));
    });

---

EDIT:

Альтернатива, предложенная ANeves и использующая атрибут HTML5 placeholder , приведена ниже. Если вам не нужны старые браузеры, вы можете использовать заполнитель HTML самостоятельно (и он работает изначально, с результатами, аналогичными приведенным выше JS), или иным образом, как показано ниже, вам потребуется добавить запасной вариант JS.

Скрипка здесь: http://jsfiddle.net/leifparker/DvqYU/14/

HTML

<textarea placeholder="A few words about yourself"></textarea>
<textarea placeholder=".. and a few more about your mangy cat."></textarea>
<input type="text" placeholder="Your Awesome City">
<input type="email" placeholder="rickastin@youjustgot.com">

JS

function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

if (!hasPlaceholderSupport()){
    $('textarea, input[type=text], input[type=email]')
        .each(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        })
        .focus(function(){
            if ($(this).val()==$(this).attr('placeholder')) $(this).val('');
        })
        .blur(function(){
            if ($(this).val()=='') $(this).val($(this).attr('placeholder'));
        });
}

Answer 2

Вот как бы я это сделал, надеюсь, это поможет.

HTML

  <input type="text" value="Enter your email:" />   
  <textarea>Message:< /textarea>

SCRIPT

    $("input[type=text]").focus(function(){
        if($(this).val() == "Enter your email:") $(this).val("");       
    }).blur(function(){
        if($(this).val() == "") $(this).val("Enter your email:");       
    });  

    $("textarea").focus(function(){
        if($(this).val() == "Message:") $(this).val("");        
    }).blur(function(){
        if($(this).val() == "") $(this).val("Message:");        
    });

Answer 3

Вы можете использовать атрибуты данных для общего решения, которое будет применяться к текстовым областям и полям ввода -

HTML

<textarea name="msg" data-notext="text here">Message:</textarea><br />
<input id="email" type="text" data-notext="email here"/>

jQuery

$("textarea, input[type=text]").bind('focus blur', function() {
    if ($(this).val() == '') $(this).val($(this).data('notext'));
})

Демонстрация - http://jsfiddle.net/3jwtA/

Answer 4

Я думаю, что вы имеете в виду заполнитель следующим образом:

http://andrew -jones.com / JQuery-заполнитель-плагин /

Надеюсь, это поможет.

Answer 5

Используйте собственный атрибут html title, чтобы указать текст маски, а затем примените следующий скрипт:

html

<input type="text" value="your email" title="your email" /> 
<input type="text" value="your name" title="your name" /> 
<textarea title="your description">your description</textarea>

JS

$('input[type=text], textarea').focus(function() {
    var $ctrl = $(this);
    var title = $ctrl.attr('title');
    $ctrl.removeClass('mask');
    if ($ctrl.val()== title) { 
      $ctrl.val(''); 
    }
}).blur(function() {
    var $ctrl = $(this);
    if ($ctrl.val().length == 0) { 
        var title = $ctrl.attr('title');
        $ctrl.val(title); 
        $ctrl.addClass('mask');
    }
});

И вв этом случае вам нужно будет только предоставить названия для элементов управления.

Код: http://jsfiddle.net/pJrG9/7/