javacript関数を組み合わせる

Question

こんにちは私はクリックされたときにテキストボックスに最初にテキストボックスにそれぞれのラベル名が含まれているときに、javascript関数を使用してテキストボックスをクリックしますデータはタイプになる可能性があります。これは私はJavaScript関数を使用していると私は別の機能を持っている各テキストボックス、誰も私はこれらのすべての機能を組み合わせることができます私に教えてください、各機能の唯一の異なるものは、テキストボックスとテキストボックス名。

のJavascript機能

function clientnameclear() { 
    if(document.bunkerfrm.clientname.value=="Client Name") { 
     var bunkerfrm = document.bunkerfrm.clientname.value=""; 
     var bunkerfrm = document.bunkerfrm.clientname.focus(); 
    } 
    else { 
     var bunkerfrm = document.bunkerfrm.clientname.focus(); 
    } 
} 

function clientnamereset() { 
    if(document.bunkerfrm.clientname.value=="") { 
     var bunkerfrm = document.bunkerfrm.clientname.value="Client Name"; 
    } 
} 

function vesselnameclear() { 
    if(document.bunkerfrm.vesselname.value=="Vessel Name") { 
     var bunkerfrm = document.bunkerfrm.vesselname.value=""; 
     var bunkerfrm = document.bunkerfrm.vesselname.focus(); 
    } 
    else { 
     var bunkerfrm = document.bunkerfrm.vesselname.focus(); 
    } 
} 

function vesselnamereset() { 
    if(document.bunkerfrm.vesselname.value=="") { 
     var bunkerfrm = document.bunkerfrm.vesselname.value="Vessel Name"; 
    } 
} 

function compclear() { 
    if(document.bunkerfrm.company.value=="Company") { 
     var bunkerfrm = document.bunkerfrm.company.value=""; 
     var bunkerfrm = document.bunkerfrm.company.focus(); 
    } 
    else { 
     var bunkerfrm = document.bunkerfrm.company.focus(); 
    } 
} 

function compreset() { 
    if(document.bunkerfrm.company.value=="") { 
     var bunkerfrm = document.bunkerfrm.company.value="Company"; 
    } 
} 

HTMLコードは、私はあなたが使用することをお勧めおよび/またはなどの研究既存のライブラリ、

<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br> 
<input type="text" name="clientname" class="txtbox" value="Client Name" onmousedown="clientnameclear()" onclick="clientnameclear()" onblur="clientnamereset()" /> 
<br /><br> 
<input type="text" name="company" class="txtbox" value="Company" onmousedown="compclear()" onclick="compclear()" onblur="compreset()" /> 
<br /><br> 
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br> 
</form> 

Answer 1

です：インフィールド

• http://fuelyourcoding.com/scripts/infield/
• ClearField http://labs.thesedays.com/projects/jquery/clearfield/

Answer 2

まず、指定された入力のaltのように、デフォルト値をどこかに保存します。

<form name="bunkerfrm" id="bunkerfrm" action="#" method="post"><br> 
<input type="text" name="clientname" alt="Client Name" class="txtbox" value="Client Name" onfocus="clear_text(this);" onblur="reset_text(this);" /> 
<br /><br> 
<input type="text" name="company" class="txtbox" alt="Company" value="Company" onfocus="clear_text(this);" onblur="reset_text(this);" /> 
<br /><br> 
<input type="submit" name="submitting" class="bunksubmit" value="Send Your Inquiry" /><br> 
</form> 

そしてこれらONFOCUS/onBlurイベント関数へのパラメータとして入力要素thisを渡す：その値はに格納されたプレースホルダと同じである場合、それがフォーカスを取得したときに入力をクリアする

function clear_text(elem) 
{ 
    if (elem.value == elem.alt) 
     elem.value = ""; 
} 

function reset_text(elem) 
{ 
    if (elem.value == "") 
     elem.value = elem.alt; 
} 

alt属性イベントonblurは、reset_text関数をトリガーします。この関数は、値が空であるかどうかを確認し、alt属性に格納されているデフォルトのプレースホルダに復元します。

Answer 3

使用placeholder：

<input type="text" name="clientname" placeholder="Client Name" class="txtbox" /> 
<br /><br> 
<input type="text" name="company" class="txtbox" placeholder="Company" /> 
<br /><br> 
<input type="submit" name="submitting" class="bunksubmit" placeholder="Send Your Inquiry" /><br> 
</form>