Текст по умолчанию для текстовой области jQuery? - PullRequest
Новая
       20

Текст по умолчанию для текстовой области jQuery?

2 голосов
/ 23 января 2011

У меня есть текстовое поле, которое я хотел бы показать по умолчанию при загрузке страницы. После того, как текстовая область нажата, я хотел бы, чтобы текст исчез, и, возможно, если пользователь щелкнул текстовую область и ничего не набрал, а затем щелкнул текстовую область, текст по умолчанию снова появится.

Я искал в Google и здесь, но я могу только найти учебники, относящиеся к текстовым полям и НЕ текстовым областям, плюс я уже использую класс для текстовой области, поэтому не могу зависеть от класса, чтобы он работа.

Есть ли у кого-нибудь простой код jQuery, которым он хотел бы поделиться со мной, чтобы сделать то, что я хочу выше?

Ответы [ 5 ]

14 голосов
/ 23 января 2011

ДЕМО: http://jsfiddle.net/marcuswhybrow/eJP9C/2/

Важно помнить крайний случай, когда пользователь вводит значение по умолчанию. Мое решение позволяет избежать этого, назначая каждому textarea флаг edited с помощью метода jQuery data().

HTML

Определите значение по умолчанию textarea, как обычно: 

<textarea>This is the default text</textarea>

JQuery 

$('textarea').each(function() {
    // Stores the default value for each textarea within each textarea
    $.data(this, 'default', this.value);
}).focus(function() {
    // If the user has NOT edited the text clear it when they gain focus
    if (!$.data(this, 'edited')) {
        this.value = "";
    }
}).change(function() {
    // Fires on blur if the content has been changed by the user
    $.data(this, 'edited', this.value != "");
}).blur(function() {
    // Put the default text back in the textarea if its not been edited
    if (!$.data(this, 'edited')) {
        this.value = $.data(this, 'default');
    }
});

DEMO: http://jsfiddle.net/marcuswhybrow/eJP9C/2/

3 голосов
/ 23 января 2011

Достаточно просто: 

$(function() {
  $('textarea.autoDefault').focus(function() {
     if($(this).val() === $(this).data('default') && !$(this).data('edited')) {
        $(this).val('');   
     }
  }).change(function() {
     $(this).data('edited', this.value.length > 0);
  }).blur(function() {
     if($(this).val().length === 0) {
        $(this).val($(this).data('default'));
     }
  }).blur(); //fire blur event initially
});

HTML-разметка: 

<textarea class="autoDefault" rows="10" cols="25" data-default="some default text"></textarea>

jsFiddle пример

1 голос
/ 15 января 2014 
"style='color:#888;' onfocus='inputFocus(this)' onblur='inputBlur(this)'"

^ добавьте это к вашему HTML-элементу 

function inputFocus(i){
    if(i.value==i.defaultValue){ i.value=""; i.style.color="#000"; }
}
function inputBlur(i){
    if(i.value==""){ i.value=i.defaultValue; i.style.color="#888"; }
}

^ добавьте это к вашей функции document.ready

Я нашел это решение на SO некоторое время назад, и у меня нетне видел, чтобы это было лучше

0 голосов
/ 07 июня 2011

Другой способ - использовать тег-заполнитель HTML5.

http://davidwalsh.name/html5-placeholder

Вероятно, это поддерживается не во всех браузерах, особенно в старых IE.

0 голосов
/ 23 января 2011

Я искал в Google и здесь, но я могу только найти учебники, относящиеся к текстовым полям

Все, что используется в текстовом поле, может также использоваться в текстовой области вJQuery.Метод val () обнаруживает используемый элемент управления и будет использовать атрибут value для ввода и внутренний текст для textarea

. Взять любую из этих ссылок и реализовать ее

.
...