Question

问题：

 <body onload="setBlurFocus()">   
     <form method="POST" action="#">   
              <input id="id_username" type="text" name="username" maxlength="100" />
              <input type="text" name="email" id="id_email" />
              <input type="password" name="password" id="id_password" /> 
        </form> 
    </body>

我写了：

function setBlurFocus () {
    var user_input = document.getElementById('id_username');
    var email = document.getElementById('id_email');
    var password = document.getElementById('id_password');
    user_input.onblur = userSetBlur();
    email.onblur = emailSetBlur();
    password.onblur = passSetBlur();
    user_input.onfocus = function() {
            document.getElementById('id_username').value = ''   
        }
    email.onfocus = function() {
            document.getElementById('id_email').value = ''  
        }
    password.onfocus = function() {
            document.getElementById('id_password').value = ''   
        }

}

function userSetBlur() {
    document.getElementById('id_username').value = 'Username'
}
function emailSetBlur() {
    document.getElementById('id_email').value = 'Email'
}

function passSetBlur() {
    document.getElementById('id_password').value = 'Password'
}

问题吗 如何generalize或optimized此代码？

Answer 1

您始终可以在JavaScript中附加方法：

function setBlurFocus() {
    var user_input = document.getElementById('id_username');
    user_input.onblur = someFunction;
    // or with an anonymous function:
    user_input.onfocus = function() {
        // do something
    }
}

详细了解traditional event handling和events in general。

进一步说明：

您已将函数setBlurFocus附加到文档的load事件中。如果您必须使用JavaScript访问DOM元素，这是正确的。在创建所有元素时触发load事件。

如果您将setBlurFocus()附加到blur字段的input事件，则只有在文本框失去焦点时才会执行该功能。

根据您的问题，我得出结论，您不希望在HTML中设置事件处理程序，但您希望在setBlurFocus函数中设置它们。

关于您的更新：

这是错误的：

user_input.onblur = userSetBlur();

这会将函数的返回值分配给onblur。你想要自己分配函数，所以你必须写：

 user_input.onblur = userSetBlur;

() 调用该函数。你不希望这样（在大多数情况下，有例外，见下文）。

此外，您不必使用onblur的命名函数和onfocus的匿名函数。这只是一个例子，向您展示您拥有的不同可能性。例如。如果只为一个元素分配一个事件处理程序，则无需将其定义为额外函数。但是如果你想重用事件处理程序，你必须这样做。

以下是改进版本：

function setBlurFocus () {
    var values = ["Username", "Email", "Password"];
    var elements = [
        document.getElementById('id_username'),
        document.getElementById('id_email'),
        document.getElementById('id_password')
    ];

    for(var i = elements.length; i--; ) {
        elements[i].onblur = setValue(values[i]);
        elements[i].onfocus = emptyValue;
    }
}

function setValue(defaultValue) {
    return function(){this.value = defaultValue;};
}

function emptyValue() {
    this.value = '';
}

事件处理程序内的

this引用处理程序绑定的元素。

注意：此处setValue 会返回一个函数，这就是我们在这种情况下调用setValue的原因（而不只是分配它）。

重要说明：如果用户输入了一些数据，这也会将值重置为Username等。您必须确保，只有在用户未输入数据时才重置它。类似的东西：

function setValue(defaultValue) {
    return function(){
        if(this.value !== "") {
            this.value = defaultValue;
        }
    };
}

并且您必须定义类似的emptyValue：

function emptyValue(defaultValue) {
    return function(){
        if(this.value === defaultValue) {
            this.value = "";
        }
    };
}

既然我知道你真正想做什么，那么还要看看HTML5's placeholder attribute。

Answer 2

你用jquery标记了它，所以这是在jquery中这样做的方法：

function setBlurFocus () {
  //do stuff here
} 

$('#id_username').blur(setBlurFocus);

或

$('#id_username').blur(function(){
    //do stuff here
});

Answer 3

关于您的更新

我使用jquery作为tab jquery，代码如下：你可以通过这个链接查看一个实时样本：

http://jsfiddle.net/e3test/zcGgz/

html代码：

<form method="POST" action="#">   
             <input id="id_username" type="text" name="username" maxlength="100" />
<input type="text" name="email" id="id_email" />
<input type="password" name="password" id="id_password" /> 
</form>

javascript代码：

$(function(){
    var selector = {
        username: $('#id_username'),
        email: $('#id_email'),
        password: $('#id_password')
    };

    for (var x in selector) {
        selector[x].focus(function(){
           $(this).val('');
        }).blur(function(){
            $(this).val($(this).attr('name'));
        });
    }
});

希望有所帮助。

如何在javascript中编写onblur和onfocus事件？

3 个答案: