web-dev-qa-db-ja.com

フォーカスのあるテキストエリアをクリアするにはどうすればよいですか？

ユーザーがtextareaをクリックすると、textareaの内容をクリアしたい場合に、textareaで単純なフォームを使用しています。

これは可能ですか？

javascriptjquerytextarea
35
CLiown
$('textarea#someTextarea').focus(function() {
   $(this).val('');
});
54
Jacob Relkin

デフォルトのテキスト（存在する場合）のみを削除する場合は、これを試してください：

$("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>

ただし、これは対応ブラウザでのみサポートされます。ただし、フォーム送信時にプレースホルダーテキストを送信しないという利点もあります。

27
kingjeffrey

私の提案は、最初のフォーカスで最初のデフォルトコンテンツのみを削除することです。その後のフォーカスでは、ユーザーコンテンツを削除するリスクがあります。これを実現するには、最初のクリック後のフォーカスハンドラーを単に。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 = "";_。

12
Peter Ajtai

HTML5は、この問題に対するより洗練されたソリューション、「プレースホルダー」属性を提供します。

Textareaが空の場合にのみ表示されるtextareaの背景にテキストを作成します。

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

現在の回答では部分的にしか対処されていない問題がいくつかあります。

  1. ユーザーがフィールドにフォーカスしたときにテキストをクリアする必要があります
  2. ユーザーが最初にフィールドをクリックしたときにのみクリアしたい
  3. ユーザーがデフォルトのテキストをクリアする前に送信できるようにしたくない
  4. ユーザーがデフォルトのテキストを再入力することを許可したい場合があります。これを行う理由がわかりませんが、ユーザーがテキストを再入力することを主張する場合は、それらを入力するようになりますやれ。

これらの詳細を念頭に置いて、「プレースホルダー」という名前のクラスをフィールドに追加し、次のようなものを使用します。

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

ユーザーがreally、reallyであることを保証するために、フォームの送信時に「プレースホルダー」クラス名が削除されたことを検証する愚かなプレースホルダーテキストを送信したい。

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();
    }
});
7
Wayne Burkett
jQuery(function($){
    $("textarea").focus(function(){
        $(this).val("");
    });
});
4
Álvaro González

このようなもの？

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

これは可能であり、1つ以上のテキストエリアでこれを行うことができるコードを探していると思います...
これは私のサイトで使用するものです。
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>
0
GuyFromOverThere
<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>
0
clickandboom

私はそれを簡単に見つけました

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

Chromeのフォームをクリアしますが、Firefox（6.x）では機能しませんでした。Firebugでは値は空でしたが、前のテキストはまだテキストエリアに表示されていました。 textareasを一度に1つずつ再構築します。

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

これにより、Firefoxでジョブが終了し、Chromeが破損しません。フォーム内のすべてのテキストエリアを1つずつ通過します。他のすべてのブラウザー（Opera、Safari、IEでも）で動作します。

0
Chris Adams