个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 09:05:55 25 4
gpt4 key购买 nike

问题:

 <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 中的方法:

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() 附加到 input 字段的 blur 事件，那么该函数仅在文本框出现时执行失去焦点。

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

关于您的更新:

这是错误的:

user_input.onblur = userSetBlur();

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

 user_input.onblur = userSetBlur;

() 调用 函数。你不希望那样(在大多数情况下，有异常(exception)，见下文)。

此外，您不必为 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 指的是处理程序绑定(bind)到的元素。

注意:这里 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 .

关于javascript - 如何在 javascript 中编写 onblur 和 onfocus 事件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5014710/

25 4 0
文章推荐： Java 进程占用的内存超过其最大堆大小
文章推荐： javascript - 在 webOS 应用程序中提交和存储数据？
文章推荐： javascript - 使用ajax post请求从 Node 服务器接收响应时出现问题
文章推荐： javascript - 如何创建消息队列？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com