Question

我有一个输入字段完全按照我的意愿工作，但是，我有许多字段重复相同的代码。是否可以调用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>

Answer 1

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

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

这将为模糊和焦点事件调用onBlurAction。您可以为onselect和onclick执行类似操作。

Answer 2

你能否使用placeholder attribute？

修改

正如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/

Answer 3

在您的函数中，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)"

如何重用JavaScript函数进行表单输入控件？

3 个答案: