首页 > 软件开发 > HTML >

页面加载完成,如何设置一个按钮自动获得焦点

来源:互联网 2023-03-16 19:15:56 494

在做页面开发时,我们有时需要设置页面的默认按钮,即为一个按钮设置一个焦点,在页面加载完成就设置焦点,这样我们就不需要使用鼠标,而是直接使用键盘就可以操作按钮了。下面来看一下怎么处理。H2J办公区 - 实用经验教程分享!

方法/步骤

  • 1

    页面上有二个按钮,分别触发不同的事件。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 1该信息未经许可获取自百度经验
  • 2

    事件函数我们简单处理,只是分别弹出一个对话框。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 3

    按此代码运行页面,二个按钮都没有获得焦点的,这时按回车键是不能触发点击事件的。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 4

    我们在页面添加一段js脚本,先通过document.getElmentById方法来获得要设置焦点的按钮。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 5

    然后再使用按钮对象的focus方法来设置它的焦点。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 6

    这样添加脚本后,就可以了。但需要注意的是上面的脚本代码需要放置在html按钮的后面,如果放到它的前面,是获取不到对应的按钮对象的。H2J办公区 - 实用经验教程分享!

    重新运行页面,可以看到页面的第一个按钮能已经得到了焦点了。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 7

    直接按下键盘上的回车键,或者空格键,就会触发到按钮的点击事件了。H2J办公区 - 实用经验教程分享!

    页面加载完成,如何设置一个按钮自动获得焦点?H2J办公区 - 实用经验教程分享!

  • 以上方法由办公区教程网编辑摘抄自百度经验可供大家参考!H2J办公区 - 实用经验教程分享!


    标签: HTMLCSS

    办公区 Copyright © 2016-2023 www.bgqu.net. Some Rights Reserved. 备案号:湘ICP备2020019561号统计代码