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

您可以将一个函数用作多个事件的处理程序。

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

这将需要onBlurAction模糊和焦点事件。onselect您可以为和做类似的事情onclick。

于 2013-09-23T22:38:37.150 回答
0

你不能使用占位符属性吗？

编辑：

像 Thomas Upton 提到的那样做是行不通的，因为他正在使用 .value 属性。一旦用户输入某些内容，该值就会改变，因此该函数将无法正确检查（默认）值，因为它已被更改。

他可以使用占位符属性来辅助该功能。像这样的东西：

        <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 回答
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 回答