16

入力フィールドがあります：

<input name="Name" value="Enter Your Name">

ユーザーがボックスをクリックしたときに、事前定義されたテキスト (名前を入力) を削除するにはどうすればよいですか。

私の知る限り、Javascript がこれを行うための最良の方法です。それが間違っている場合は、私に知らせてください。

4

9 に答える 9

46

HTML5 プレースホルダー属性

あなたはおそらくplaceholder機能を望んでいます：

<input name="Name" placeholder="Enter Your Name" />

古いブラウザのポリフィル

これは一部の古いブラウザーでは機能しませんが、その機能にパッチを当てるためにポリフィルが存在します(jQuery が必要なものもあれば、そうでないものもあります)。

「くそっ、自分でやるぞ」

独自のソリューションを展開したい場合は、要素のonfocusおよびonblurイベントを使用して、その値を決定することができます。

<input name="Name" value="Enter Your Name"
       onfocus="(this.value == 'Enter Your Name') && (this.value = '')"
       onblur="(this.value == '') && (this.value = 'Enter Your Name')" />

HTML と JavaScript を混在させない

onblur私たちのほとんどは、 や などの属性から JavaScript を評価することをあまり好まないことがわかりますonfocus。代わりに、このロジックを純粋に JavaScript にバインドすることをお勧めします。確かに、これはもう少し冗長ですが、ロジックとマークアップを適切に分離しています。

var nameElement = document.forms.myForm.Name;

function nameFocus( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "Enter Your Name") element.value = "";
}

function nameBlur( e ) {
  var element = e.target || window.event.srcElement;
  if (element.value == "") element.value = "Enter Your Name";
}

if ( nameElement.addEventListener ) {
  nameElement.addEventListener("focus", nameFocus, false);
  nameElement.addEventListener("blur", nameBlur, false);
} else if ( nameElement.attachEvent ) {
  nameElement.attachEvent("onfocus", nameFocus);
  nameElement.attachEvent("onblur", nameBlur);
}

デモ: http://jsbin.com/azehum/2/edit

于 2012-05-17T14:42:37.840 に答える
4

これは正しい、クロスブラウザの方法です:

<input type="text" value="Enter Your Name" onfocus="if(this.value  == 'Enter Your Name') { this.value = ''; } " onblur="if(this.value == '') { this.value = 'Enter Your Name'; } " />
于 2012-05-17T14:44:56.503 に答える
3

使用onclick="this.value=''":

<input name="Name" value="Enter Your Name" onclick="this.value=''">
于 2016-01-19T10:10:44.353 に答える
2

前に述べたように、私もこの質問placeholderが答えであるのを見ました。勝利のためのHTML5！しかし、その機能に頼ることができない哀れな人々のために、jqueryプラグインも拡張機能として見てください。HTML5プレースホルダーjQueryプラグイン

<input name="Name" placeholder="Enter Your Name">
于 2012-05-17T14:51:52.723 に答える
1

これはそれを行う必要があります：

HTML

<input name="Name" value="Enter Your Name" onClick="blankDefault('Enter Your Name', this)">

JavaScript

function blankDefault(_text, _this) {
    if(_text == _this.value)
        _this.value = '';
}

ただし、より良い/目立たない方法がありますが、これで仕事が完了します。

于 2012-05-17T14:41:19.217 に答える
1

実際にプレースホルダーを表示したいのですが、HTML 5 はこの機能を提供しており、非常に便利です。

これを試してください：

<input name="Name" placeholder="Enter Your Name">
于 2012-05-17T14:42:26.137 に答える
1

placeholder="your text"あなたができることに加えてonclick="this.value='';

したがって、次のようになります。

<input name="Name" value="Enter Your Name" onclick="this.value='';>
于 2016-08-04T16:57:08.977 に答える
1 
<input name="Name" value="Enter Your Name" onfocus="freez(this)" onblur="freez(this)">


function freez(obj)
{
 if(obj.value=='')
 {
   obj.value='Enter Your Name';
 }else if(obj.value=='Enter Your Name')
 {
   obj.value='';
 }
}
于 2012-05-17T16:13:25.053 に答える