Как я могу очистить текстовое поле в фокусе?

Ответ 1

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

Ответ 2

Если вы хотите удалить текст по умолчанию (если он существует), попробуйте следующее:

$("textarea").focus(function() {

    if( $(this).val() == "Default Text" ) {
        $(this).val("");
    }

});

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

Если вы хотите повторно вставить текст по умолчанию после их выхода (если они не вводят какой-либо текст), сделайте следующее:

$("textarea").blur(function() {

    if( $(this).val() == "" ) {
        $(this).val("Default Text");
    }

});

Конечно, приведенные выше примеры предполагают, что вы начинаете со следующей разметки:

<textarea>Default Text</textarea>

Если вы хотите использовать текст-заполнитель семантически, вы можете использовать новое свойство HTML5:

<textarea placeholder="Default Text"></textarea>

Хотя это будет поддерживаться только в браузерах с поддержкой. Но у него есть дополнительное преимущество - не отправлять текст заполнителя при отправке формы.

Ответ 3

Мое предложение состоит в том, что вы удаляете исходный контент по умолчанию в первом фокусе. При последующих фокусах вы рискуете удалить пользовательский контент. Для этого просто . Unbind() обработчик фокуса после первого щелчка:

$("textarea").focus(function(event) {

      // Erase text from inside textarea
    $(this).text("");

      // Disable text erase
    $(this).unbind(event);
});

Пример jsFiddle

В качестве примечания, поскольку вы используете textarea, у которого есть открытые и закрывающие теги, вы можете использовать $(this).text(""); или $(this).html("");... и, поскольку текст внутри textarea является его вы также можете использовать $(this).val(""); и $(this).attr("value", ""); или даже this.value = "";.

Ответ 4

Здесь есть несколько проблем, которые частично рассматриваются в текущих ответах:

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

С учетом этих деталей я добавил класс с именем "placeholder" в поле и использовал бы что-то вроде следующего:

$("form textarea.placeholder").focus(function(e) {
    $(this).text("");
    $(this).removeClass("placeholder");
    $(this).unbind(e);
});

Подтвердите, что имя класса "placeholder" было удалено при отправке формы, чтобы гарантировать, что пользователь действительно хочет отправить какой-то глупый текст заполнителя.

Если вы используете плагин jQuery Validation Plugin, вы можете собрать все это следующим образом:

$.validator.addMethod("isCustom", function(value, element) {
    return !$(element).hasClass("placeholder");
});

$(form).validate({
    rules: {
        message: {
            required: true,
            isCustom: true
        }
    },
    messages: {
        message: "Message required, fool!"
    },
    submitHandler: function(form) {
        $(form).find(":submit").attr("disabled", "disabled");   
        form.submit();
    }
});

Ответ 5

HTML5 предлагает более элегантное решение этой проблемы: атрибут "placeholder".

Он создаст текст в фоновом режиме вашего текстового поля, который появится только тогда, когда текстовое поле пуст.

<textarea placeholder="Enter some text !"></textarea>

Ответ 6

jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});

Ответ 7

Что-то вроде этого?

$('textarea#myTextarea').focus(function() {
   if ($(this).val() == 'default text') {
      $(this).val('');
   }
});

Ответ 8

<textarea type="text" onblur="if ($(this).attr('value') == '') {$(this).val('The Default Text');}"  onfocus="if ($(this).attr('value') == 'The Default Text') {$(this).val('');}">The Default Text</textarea>

Ответ 9

Это возможно, и я думаю, что вы собираетесь использовать код, который может сделать это для большего количества текстовых областей, чем один... Это то, что я использую для своего сайта:
JavaScript:

<script type='text/javascript'>
function RemoveText(NameEle)
{
    if ($('#' + NameEle) == 'default')
    {
        $('#' + NameEle).val('');
        $('#' + NameEle).text('');
        $('#' + NameEle).html('');
    }
}
function AddText(NameEle)
{
    if ($('#' + NameEle) == '')
    {
        $('#' + NameEle).val('default');
        $('#' + NameEle).text('default');
        $('#' + NameEle).html('default');
    }
}
</script>

HTML:

<textarea cols='50' rows='3' onfocus='RemoveText(this)' onblur='AddText(this)' name='name' id='id'>default</textarea>

Ответ 10

Я обнаружил, что просто

$('#myForm textarea').val(''); 

очищает форму в Chrome, но это не работает для Firefox (6.x). Значение было пустым в Firebug, но предыдущий текст все еще показывался в текстовом поле. Чтобы обойти это, я выбираю и перестраиваю текстовые области по одному за раз:

$('#' + formId + ' textarea').each(function(i){
textareaVal = $(this).parent().html();
$(this).parent().html(textareaVal);   
});

Это завершает работу в Firefox и не прерывает Chrome. Он будет проходить через все текстовые поля в форме один за другим. Работает во всех других браузерах (Opera, Safari, даже IE).