• 浅谈页面中的焦点


    一、前言
    这篇文章主要是讲跟页面中焦点相关的东西,算是一个小的总结,目测应该没有比我更无聊的人会去写这方面东西把~

    二、正文
    本文希望精简一点,所以用问答形式来写把。

    问题一:页面载入完成时,浏览器焦点在什么位置?
    这个问题很大程度取决于浏览器。我测试了一些浏览器发现。

    1: 在Chrome中,焦点默认在body上面。

    2: 在IE中,焦点应该是在浏览器上面而不是页面上。(IE不同版本之间貌似还有差别,不过我没有具体去研究)

    那么,如果设置默认的焦点位置呢?

    方法一: 通过Javascript来设置

    document.getElementById("ele").focus();
    

    这样,ID为ele的元素就会获得焦点,一个常见的需求就是让页面的一个input默认获得焦点,通过这句话就可以解决。

    方法二: 使用HTML5定义的新属性autofocus

    为元素加上autofocus属性可以让其自动获得焦点,兼容现代浏览器和IE10+

    <input type="text" autofocus />
    

    就像这样,这个input在页面载入后会自动获得焦点。

    之后,焦点的位置基本取决于你鼠标点击的位置,大部分情况下会是在body或者一些表单元素上面

    问题二:tabindex属性是干嘛的?
    相信很多人看到过这个属性,但是都是一带而过。简而言之,tabindex是用来控制焦点切换顺序的。

    很多时候,我们会用到焦点完全是用TAB键的时候,而tabindex属性就是决定你用tab键切换焦点时候的顺序。

    举个例子

    <input  value="1" type="text" tabindex="1">
    <input  value="4" type="text" tabindex="4">
    <input  value="2" type="text" tabindex="2">
    <input  value="3" type="text" tabindex="3">
    

    比如上面这段代码,本来你用tab键切换焦点时,是按照HTML的顺序来的。但是如果你设置了tabindex,那么焦点切换顺序将会是按照tabindex的值的大小来的。其实关于这个tabindex,司徒正美的这篇博客讲的很详细了,就不多说了。

    问题三:如何知道当前焦点在哪个元素上?
    怎么知道当前焦点在哪里呢,虽然很少情况需要知道这个,但是DOM还是提供了接口去得到这个。
    那就是通过document.activeElement来实现,这个属性可以得到当前焦点的DOM元素的引用,具体可以看文档,兼容性良好。

    在jQuery中,也可以通过

    $("*:focus") //获得焦点的元素
    $("input:focus") //获得焦点的input元素
    

    类似这样代码去得到。
    https://www.cnblogs.com/season-huang/p/3415880.html

  • 相关阅读:
    URAL 1736 Chinese Hockey 网络流+建图
    python基础教程_学习笔记14:标准库:一些最爱——re
    吐槽下CSDN编辑器
    让你提前认识软件开发(23):怎样在C语言中运行shell命令?
    GDB十分钟教程
    任务调度开源框架Quartz动态加入、改动和删除定时任务
    AfxMessageBox和MessageBox差别
    Linux Shell脚本入门--awk命令详解
    鲁棒性的获得 —— 测试的架构
    C Tricks(十八)—— 整数绝对值的实现
  • 原文地址:https://www.cnblogs.com/marklove/p/16034304.html
Copyright © 2020-2023  润新知