请问如何模拟失去焦点事件呢?

请问如何模拟失去焦点事件呢?

完整程序如下。

我在按钮的click事件中,让两个input表单失去焦点。但是为什么点击按钮后,控制台不会输出username和password呢?

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>失去焦点事件</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   </head>

   <body>
        <form>
            <input type="text" placeholder="用户名" id="username">
            <input type="password" placeholder="密码" id="password">
        </form>
        <button id="button">click</button>


      <script type="text/javascript">
            let eleUsername = document.getElementById("username"),
                elePassword = document.getElementById("password"),
                eleButton = document.getElementById("button");

            // 失去焦点时输出id
            eleUsername.addEventListener("blur", function()
            {
                console.log(this.id);
            });

            // 失去焦点时输出id
            elePassword.addEventListener("blur", function()
            {
                console.log(this.id);
            });

            // 点击按钮,让两个input表单发生失去焦点事件
            eleButton.addEventListener("click", function()
            {
                eleUsername.blur();
                elePassword.blur();
            });
      </script>
   </body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

5回答
好帮手慕言 2020-01-09 16:20:49

同学你好,这种方式也是可以的,看来同学是一个特别爱动脑,并且可以把自己的想法使用代码实现的人,非常好,棒棒哒,给你点赞,继续加油,祝学习愉快~

提问者 我学习太差被关起来了 2020-01-09 15:13:28

解决方案如下:

// 点击按钮,让两个input表单发生失去焦点事件
eleButton.addEventListener("click", function()
{
   eleUsername.focus();
   eleUsername.blur();
   elePassword.focus();
   elePassword.blur();
});


好帮手慕言 2020-01-09 13:55:28

同学你好,同学提供的代码老师都测试了,同学提供的click事件代码,是可以这样写的。

而失焦事件比较特殊,是因为元素只有获取焦点了,才会触发失焦事件。在第一次回答时已经给出了解答。如下:

http://img1.sycdn.imooc.com//climg/5e16bfad09294c3707010502.jpg

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 谢谢老师回复,我想到解决方案了。那就是先获得焦点,后失去焦点。
    2020-01-09 15:12:37
好帮手慕言 2020-01-09 10:09:22

同学你好,在点击按钮时,没有触发用户名、密码输入框的失焦事件,是因为这两个输入框,在点击按钮时没有聚焦,既然没有聚焦又何来的失焦呢

因此建议:可以给一个输入框聚焦之后,再点击按钮,即可触发失焦事件。如下:

http://img1.sycdn.imooc.com//climg/5e168a9f0980a8b806460173.jpg

控制台:

http://img1.sycdn.imooc.com//climg/5e168ab409e4658602690182.jpg

因为页面上只能有一个元素聚焦,所以只能模拟一个元素的失焦事件。

如果我的回答帮到了你,欢迎采纳,祝学习愉快~

  • 老师,你没看到click时间里的eleUsername.blur();和elePassword.blur();这两行代码吗?我需要实现的功能就是点击按钮,执行两个input元素绑定的blur事件函数。
    2020-01-09 10:19:02
  • 还有,类似的例子如click事件。点击button3,执行button1和button2绑定的click事件函数。这个就可以实现,代码我在下面已经列出。
    2020-01-09 10:21:19
提问者 我学习太差被关起来了 2020-01-08 22:03:50

类似的还有click事件。但是click事件却没有问题,程序如下所示。

点击button3,控制台那个输出button1和button2。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

   <head>
      <title>点击事件</title>
      <meta charset="UTF-8">
      <meta name="renderer" content="webkit">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   </head>

   <body>
        <div>
            <button id="button1">button 1</button>
            <button id="button2">button 2</button>
        </div>
        <button id="button3">button 3</button>


      <script type="text/javascript">
            let button1 = document.getElementById("button1"),
                button2 = document.getElementById("button2"),
                button3 = document.getElementById("button3");

            button1.addEventListener("click", function()
            {
                console.log(this.id);
            });

            button2.addEventListener("click", function()
            {
                console.log(this.id);
            });

            // 点击button3,让button1和button2发生click事件
         button3.addEventListener("click", function()
            {
                button1.click();
                button2.click();
            });
      </script>
   </body>

</html>


  • 上面打字错了,更正如下:点击button3,控制台“能够”输出button1和button2。
    2020-01-08 22:05:42
问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
2.组件化网页开发
  • 参与学习           人
  • 提交作业       1121    份
  • 解答问题       14456    个

本阶段在运用JS实现动态网页开发的基础上,带你深入理解企业开发核心思想,完成一个企业级网页的开发,体验前端工程师的成就感。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师