0

こんにちは私はjavascript関数を使用して、クリックしたときにmaテキストボックスを表示します。最初はテキストボックスにそれぞれのラベル名が含まれています（例：クライアント名、会社など）。テキストボックスをクリックすると、テキストボックスが空になり、データを入力できるようになります。このために私は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>
4

3 に答える 3

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>

次に、入力要素thisをパラメーターとしてこれらのonfocus/onblur関数に渡します。

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_textalt

于 2012-05-04T02:04:34.307 に答える
1

使用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>
于 2012-05-04T02:10:38.833 に答える
0

次のような既存のライブラリを使用および/または調査することをお勧めします。

于 2012-05-04T02:01:46.680 に答える