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

本文介绍了如何在javascript中编写onblur和onfocus事件?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

问题:

 <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'
}

问题?如何概括或优化这段代码?

推荐答案

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

You can always attach the methods in 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
    }
}

阅读有关传统事件处理和一般事件.

进一步说明:

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

You attached the function setBlurFocus to the load event of the document. This is correct if you have to access DOM elements with JavaScript. The load event is fired when all the elements are created.

如果将setBlurFocus()附加到input字段的blur事件中，则该函数仅在文本框失去焦点.

If you attach the setBlurFocus() to the blur event of the input field, then the function is only executed when the text box looses focus.

从你的问题我得出结论，你不想在 HTML 中设置事件处理程序，但你想在 setBlurFocus 函数中设置它们.

From your question I concluded you don't want set the event handlers in the HTML, but you want to set them form inside the setBlurFocus function.

关于您的更新:

这是错误的:

user_input.onblur = userSetBlur();

这将函数的返回值分配给onblur.你想给函数本身赋值，所以你必须写:

This assigns the return value of the function to onblur. You want to assign the function itself, so you have to write:

 user_input.onblur = userSetBlur;

() 调用函数.你不希望那样(在大多数情况下，有例外，见下文).

The () calls the function. You don't want that (in most cases, there are exceptions, see below).

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

Furthermore, you don't have to use named functions for onblur and anonymous functions for onfocus. It was just an example, to show you the different possibilities you have. E.g. if you assign an event handler to only one element, then there is no need to define it as extra function. But you have to do this if you want to reuse event handlers.

这是一个改进的版本:

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 指的是处理程序绑定到的元素.

this inside the event handlers refers to the element the handler is bound to.

注意:这里setValue返回一个函数，这就是为什么我们在这种情况下调用setValue(和不只是分配它).

Note: Here setValue returns a function, that is why we call setValue in this case (and not just assign it).

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

Important note: This will also reset the values to Username etc, if the user entered some data. You have to make sure, that you only reset it if the user has not entered data. Something like:

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

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

and you'd have to define emptyValue similar:

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

既然我知道你真正想要做什么，也看看 HTML5 的 placeholder 属性.

这篇关于如何在javascript中编写onblur和onfocus事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！