フィールドに入力するとフォームの値が消えるようにするにはどうすればよいですか？

Question

私は約8つの入力フィールドで簡単なフォームを作っています。私はフィールドに人が何を入力することになっているのかを示す初期値が必要です。たとえば、value = "name"のように、人々がそこに名前を入力することを知るようにします。

初期値はヒントであり、名前を入力する前に消去しなければならない恒久的な値ではないように、フィールドを入力すると初期値がどのように消えるのですか？

ありがとうございます！

Answer 1

「デフォルト」の値を「名前」に設定します。その後、javascriptと 'onfocus'イベントを使用して、フィールドをクリアします。

だからあなたが持っているでしょう：

<input type="textbox" value="Name" onfocus="if (this.value=='Name') this.value='';"/> 

Answer 2

基本のjavascript：

<input type="text" value="name" onfocus='if(this.value=="name"){this.value="";}' /> 

Answer 3

をこれは、あなたがそれを行う必要があります方法です。

<input type="text" value="name" onfocus="this.value = this.value=='name'?'':this.value;" onblur="this.value = this.value==''?'name':this.value;"> 

クリックするとデフォルト値に戻ります。彼らがそれをクリックして何かを入力すると、それを再びクリックして戻ってくると、何を入れるのかを消去しようとはしません。

Answer 4

はるかに簡単な方法は、おそらく次のようになります。

placeholder="Name" 

Answer 5

S & Gの私は、この問題のための再利用可能なjQueryのソリューションを投稿するだろうと思っただけのために。

var formDefaulter=function(){ 
    //Class to hold each form element 
    var FormElement=function(element){ 
     var that=this; 
     this.element=element; 

     var initialVal=this.element.val(); 
     var isEdited=false; 

     this.element.focus(function(){clearBox()}); 
     this.element.blur(function(){fillBox()}); 

     var clearBox=function(){ 
      if(!isEdited){ 
       that.element.val(""); 
       isEdited=true; 
      } 
     } 
     var fillBox=function(){ 
      if(that.element.val()==""){ 
       that.element.val(initialVal); 
       isEdited=false; 
      } 
     } 
    } 

    var add=function(elementId){ 
     new FormElement($('#'+elementId)); 
    } 

    return{ 
     add:add 
    } 
}(); 

次に、ID属性値を使用して各要素をアタッチしてください。同様に：

$(function(){ 
    formDefaulter.add('contact_name'); 
    formDefaulter.add('contact_email'); 
    formDefaulter.add('contact_msg'); 
}); 

これは、コンテンツが削除されている場合、これも元の値でフォーム要素を補充します。とにかく、これは誰かにとって有益なことだと思います。