jQuery: текстовое значение по умолчанию отображается при клике

Question

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

Я хочу именно так, http://www.webune.com/forums/20101025cgtc.html

Но я бы хотел, чтобы это было сделано в jQuery.

<textarea id="textarea">This should be removed..</textarea>

Answer 1

Я использую это как немного более общее - оно очистит значение элемента в фокусе, но вернет значение элемента к значению по умолчанию, если оно пустое.

$("#textarea")
  .focus(function() {
        if (this.value === this.defaultValue) {
            this.value = '';
        }
  })
  .blur(function() {
        if (this.value === '') {
            this.value = this.defaultValue;
        }
});

Answer 2

Вы можете сделать это даже без JavaScript, используя атрибут placeholder .

Но вы должны знать, что еще не все браузеры его поддерживают. В этом случае вы можете использовать, например, этот плагин: http://plugins.jquery.com/project/input-placeholder

Answer 3

Очень простое решение, не зависящее от jQuery:

<textarea onfocus="if(this.value==this.defaultValue)this.value=''" onblur="if(this.value=='')this.value=this.defaultValue">Hello World</textarea>

Answer 4

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

$('#txt')
    .focusin(function() {
        if ( this.value == 'Write something...' ) {
            this.value = '';    
        }
    })
    .focusout(function() {
        if ( this.value == '' ) {
            this.value = 'Write something...';    
        }
});

Живая демоверсия: http://jsfiddle.net/g7UKN/1/

---

Обновление:

Это должно сделать это:

$('#txt')
    .each(function() {
        $(this).data('default', this.value);
    })
    .focusin(function() {
        if ( this.value == $(this).data('default') ) {
            this.value = '';    
        }
    })
    .focusout(function() {
        if ( this.value == '' ) {
            this.value = $(this).data('default');    
        }
});

Демонстрационная версия: http://jsfiddle.net/g7UKN/2/

Answer 5

$('#textarea').click(function(){
     if($(this).val() == "This should be removed.."){
          $(this).val() = "";
     }
});

// редактировать

var defaultTextAreaValue = "This should be removed..";
$('#textarea').focus(function(){
     if($(this).val() == defaultTextAreaValue){
         $(this).val("");
     }
});
$('#textarea').blur(function(){
      if($(this).val() == "" || $(this).val() == defaultTextAreaValue){
          $(this).val(defaultTextAreaValue);
      }
});

Answer 6

Просто попробуйте приведенный ниже фрагмент. При первом нажатии на текстовую область содержимое очищается.

$('#textarea').focus(function(){
 $(this).empty();
});

Answer 7

И если кто-то хочет сделать этот трюк с текстовыми областями, загруженными ajax, вы можете достичь этого с помощью события .live();)

$('#textarea').live('focusin',function () {
        if (this.value === 'leDefault ...') {
            this.value = '';
        }
    });
    $('.larger').live('focusout',function () {
        if (this.value === '') {
            this.value = 'leDefault';
        }
    });

Answer 8

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

$('#textarea').focus( function(){
        var $this =$(this);
        if($this.val() == 'This should be removed..'){
             $this.val('');
        }
}).blur(function() {
        var $this = $(this);
        if ($this.val().match(/^\s*$/) { // matches only spaces or nothing
             $this.val('This should be removed..');
        }
});