web-dev-qa-db-ja.com

クリックするとHTMLフィールドのテキストが消えますか？

すでにテキストが含まれているhtml入力フィールドを簡単に作成できます。しかし、ユーザーが入力フィールドをクリックしても、テキストは消えず、そこに留まります。ユーザーは、入力するテキストを手動で削除する必要があります。ユーザーが入力フィールドボックスをクリックするとテキストが消える入力フィールドを作成するにはどうすればよいですか？

javascripthtmluser-interfacedom-events
34
Zach Smith

あなたがしたいことは、入力ボックスのデフォルト値を設定できるHTML5属性placeholderを使用することです：

<input type="text" name="inputBox" placeholder="enter your text here">

これはあなたが探しているものを達成するはずです。ただし、Internet Explorer 9以前のバージョンではプレースホルダー属性がサポートされていないため、注意してください。

153
Nayish

これを実現するには、onfocusとonblurの2つのイベントを使用できます。

<input type="text" name="theName" value="DefaultValue"
  onblur="if(this.value==''){ this.value='DefaultValue'; this.style.color='#BBB';}"
  onfocus="if(this.value=='DefaultValue'){ this.value=''; this.style.color='#000';}"
  style="color:#BBB;" />
21
BitDrink

これは非常に簡単です。すべての問題を解決する解決策だと思います。

<input name="myvalue" id="valueText" type="text" value="ENTER VALUE">

これが送信ボタンです。

<input type="submit" id= "submitBtn" value="Submit">

次に、この小さなjQueryをjsファイルに入れます。

//this will submit only if the value is not default
$("#submitBtn").click(function () {
    if ($("#valueText").val() === "ENTER VALUE")
    {
        alert("please insert a valid value");
        return false;
    }
});

//this will put default value if the field is empty
$("#valueText").blur(function () {
    if(this.value == ''){ 
        this.value = 'ENTER VALUE';
    }
}); 

 //this will empty the field is the value is the default one
 $("#valueText").focus(function () {
    if (this.value == 'ENTER VALUE') {
        this.value = ''; 
    }
});

また、古いブラウザでも機能します。さらに、必要に応じて通常のJavaScriptに簡単に変換できます。

5
Maurizio In denmark

このように簡単：<input type="text" name="email" value="e-mail..." onFocus="this.value=''">

4
Bjössi Sveinbjörn Grétarsson

これを試してみてください。

<label for="user">user</label>
<input type="text" name="user" 
onfocus="if(this.value==this.defaultValue)this.value=''"    
onblur="if(this.value=='')this.value=this.defaultValue" 
value="username" maxlength="19" />

お役に立てれば。

4
douglas olupoit

このようなものはどうですか？

<input name="myvalue" type="text" onfocus="if(this.value=='enter value')this.value='';" onblur="if(this.value=='')this.value='enter value';">

これは、最初のフォーカスでクリアされますが、ユーザーが値を入力した後の後続のフォーカスではクリアされません。空白のままにすると、指定された値が復元されます。

3
mecsco

プレースホルダー属性を使用します。ユーザーが入力を開始すると、テキストは消えます。これは私が取り組んでいるプロジェクトの例です：

<div class="" id="search-form">
    <input type="text" name="" value="" class="form-control" placeholder="Search..." >
</div>
0
davidkihara