web-dev-qa-db-ja.com

クリック時にテキストエリアをクリアするには？

<textarea>次のデフォルト値を使用します。

<textarea>Please describe why</textarea>

ユーザーがフィールドをクリックして編集するときにデフォルト値をクリアするにはどうすればよいですか？

javascripthtmltextarea
43
Karem

JavaScript：

function clearContents(element) {
  element.value = '';
}

そしてあなたのHTML：

<textarea onfocus="clearContents(this);">Please describe why</textarea>

2回目に焦点を合わせたときにユーザー入力を消去しないように、これをもう少し堅牢にしたいと思います。 ここare5関連議論 ＆ 記事 .

そして、これが （はるかに良い）アイデア です。DavidDorwardは上記のコメントで言及しています：

<label for="explanation">Please describe why</label>
<textarea name="explanation" id="explanation"></textarea>
49
Dolph

HTML5で導入されたプレースホルダー属性を使用できます。

<textarea placeholder="Please describe why"></textarea>

これにより、フィラーテキストがグレーになり、ユーザーがテキストフィールドをクリックすると自動的に消えます。さらに、フォーカスを失い、テキスト領域が空白の場合、再表示されます。

36
Gigazelle

これはjavascriptファイルです：

function yourFunction(){
     document.getElementById('yourid').value = "";
};

これはhtmlファイルです。

    <textarea id="yourid" >
    Your text inside the textarea
    </textarea>
    <button onClick="yourFunction();">
     Your button Name
     </button>
8
emcee22

試してください：

<input name="mytextbox" onfocus="if (this.value=='Please describe why') this.value = ''" type="text" value="Please Describe why">
6
Paul Kearney - pk

あなたはテキストフィールドのためにこのような意味ですか？

<input type="text" onblur="if(this.value == '') this.value='SEARCH';" onfocus="if(this.value == 'SEARCH') this.value='';" size="15" value="SEARCH" name="xSearch" id="xSearch">

それともtextareaですか？

<textarea id="usermsg" rows="2" cols="70" onfocus="if(this.value == 'enter your text here') this.value='';" onblur="if(this.value == '') this.value='enter your text here';" >enter your text here</textarea>
5
tildy

私がこれまで知っている最善の解決策：

<textarea name="message" onblur="if (this.value == '') {this.value = 'text here';}"   onfocus="if (this.value == 'text here') {this.value = '';}">text here</textarea>
1
nmsdvid

jQuery属性val（）がジョブを実行する必要があります。 $('#YourTextareaID').click(function(e) { e.target.value = ''; })を実行できます。

0
WillyMilimo

このコードを試すことができますが、

<textarea name="textarea" cols="70" rows="2" class="searchBox" id="textarea" onfocus="if(this.value == 'Please describe why') this.value='';" onblur="if(this.value == '') this.value='Please describe why';">Please describe why</textarea>
0
user2967131

データベースからの動的なデータを受信する場合のソリューションは次のとおりです...
'data'変数はデータベースデータを表します。
まだデータが保存されていない場合、代わりにプレースホルダーが表示されます。
ユーザーが入力を開始すると、プレースホルダーが消え、テキストを入力できるようになります。

これが誰かの助けになることを願っています！

// If data is NOT saved in the database
if (data == "") {
    var desc_text = "";
    var placeholder = "Please describe why";
// If data IS saved in the database
} else {
    var desc_text = data;
    var placeholder = "";
}

<textarea placeholder="'+placeholder+'">'+desc_text+'</textarea>
0
Matt
<textarea name="post" id="post" onclick="if(this.value == 'Write Something here..............') this.value='';" onblur="if(this.value == '') this.value='Write Something here..............';" >Write Something here..............</textarea>
0
Heart