0

希望どおりに機能する入力フィールドがありますが、この同じコードを繰り返すフィールドが多数あります。JavaScript 関数を呼び出して同じ結果を得ることは可能ですか?

これが私の現在作業中のhtmlです：

<input type="text" name="lname" value="Last Name" style="color:gray;" 
onblur="if((this.value == 'Last Name') || (this.value == '')) 
{this.value = 'Last Name'; this.style.color= 'gray';} 
else {this.style.color= 'black';}"
onfocus="if((this.value == 'Last Name') || (this.value == '')) 
{this.value = ''; this.style.color= 'gray';}
else {this.style.color= 'black';}"
onselect="this.style.color= 'black';"
onclick="this.style.color= 'black';"/>

しかし、私はこのようなことができることを望んでいました:

<input type="text" name="lname" value="Last Name" style="color:gray;" 
onblur="onBlurAction()";
onfocus....
etc....
</input>

<script>
function onBlurAction()
{
    if((this.value == 'Last Name') || (this.value == '')) 
        {this.value = 'Last Name'; this.style.color= 'gray';} 
    else {this.style.color= 'black';}
}
function onFocusAction....
etc....
</script>
4

3 に答える 3

0

関数でthisは、windowグローバル変数を参照しthis、引数として渡す必要があります。

onblur="onBlurAction(this)"

関数は次のようになりますが、

function onBlurAction(el)
{
    if (el.value == 'Last Name' || el.value == '') {
        el.value = 'Last Name';
        el.style.color = 'gray';
    } else {
        el.style.color = 'black';
    }
}

別の方法は、関数を変更せずにonblurその方法を使用することです。

onblur="onBlurAction.call(this)"

于 2013-09-23T22:48:02.340 に答える
0

placeholder 属性を使用できませんか?

編集：

彼は .value 属性を使用しているため、Thomas Upton が言及したように実行しても機能しません。ユーザーが何かを入力するとすぐに値が変更されるため、変更されているため、関数は (既定の) 値を正しくチェックできません。

代わりに placeholder 属性を使用して、関数を支援することができます。このようなもの：

        <input type="text" name="lname" value="" placeholder="Last Name" style="color:gray;" 
               onblur="javascript:onBlurAction(this.name);"
               onfocus="javascript:onBlurAction(this.name);"
               onselect="javascript:onBlurAction(this.name);"
               onclick="javascript:onBlurAction(this.name);">

               function onBlurAction(elname)
               {
                   value = document.getElementById(elname).getAttribute("placeholder");
                   if ((this.value == value) || (this.value == ''))
                   {
                       this.value = value;
                       this.style.color = 'gray';
                   }
                   else {
                       this.style.color = 'black';
                   }
               }

要素名を関数に渡すと、この関数はプレースホルダー値を取得します。これは、彼が望むように関数を再利用するすべてのテキスト入力に対して機能します。ここでテスト: http://fiddle.jshell.net/6qMj8/1/

于 2013-09-23T22:40:11.420 に答える