首页 > 其他分享 >js 焦点管理

js 焦点管理

时间:2024-01-24 17:03:56浏览次数:31  
标签:管理 焦点 加载 js 文档 HTML5 compatMode document 属性

HTML5 增加了辅助 DOM 焦点管理的功能。首先是 document.activeElement,始终包含当前拥 有焦点的 DOM 元素。页面加载时,可以通过用户输入(按 Tab 键或代码中使用 focus()方法)让某个 元素自动获得焦点。例如:

let button = document.getElementById("myButton");
    button.focus();
    console.log(document.activeElement === button); // true

默认情况下,document.activeElement 在页面刚加载完之后会设置为 document.body。而在 页面完全加载之前,document.activeElement 的值为 null。 其次是 document.hasFocus()方法,该方法返回布尔值,表示文档是否拥有焦点:

let button = document.getElementById("myButton");
    button.focus();
    console.log(document.hasFocus()); // true

确定文档是否获得了焦点,就可以帮助确定用户是否在操作页面。 第一个方法可以用来查询文档,确定哪个元素拥有焦点,第二个方法可以查询文档是否获得了焦点, 而这对于保证 Web 应用程序的无障碍使用是非常重要的。无障碍 Web 应用程序的一个重要方面就是焦 点管理,而能够确定哪个元素当前拥有焦点(相比于之前的猜测)是一个很大的进步。

HTMLDocument扩展

HTML5 扩展了 HTMLDocument 类型,增加了更多功能。与其他 HTML5 定义的 DOM 扩展一样, 这些变化同样基于所有浏览器事实上都已经支持的专有扩展。为此,即使这些扩展的标准化相对较晚, 很多浏览器也早就实现了相应的功能。

1. readyState 属性

readyState 是 IE4 最早添加到 document 对象上的属性,后来其他浏览器也都依葫芦画瓢地支持 这个属性。最终,HTML5 将这个属性写进了标准。document.readyState 属性有两个可能的值:  loading,表示文档正在加载;  complete,表示文档加载完成。 实际开发中,最好是把 document.readState 当成一个指示器,以判断文档是否加载完毕。在这 个属性得到广泛支持以前,通常要依赖 onl oad 事件处理程序设置一个标记,表示文档加载完了。这个 属性的基本用法如下: 自从 IE6 提供了以标准或混杂模式渲染页面的能力之后,检测页面渲染模式成为一个必要的需求。 IE 为 document 添加了 compatMode 属性,这个属性唯一的任务是指示浏览器当前处于什么渲染模式。 如下面的例子所示,标准模式下 document.compatMode 的值是"CSS1Compat",而在混杂模式下, document.compatMode 的值是"BackCompat":

if (document.readyState == "complete"){ // 执行操作
}

2. compatMode 属性

if (document.compatMode == "CSS1Compat"){
  console.log("Standards mode");
} else {
  console.log("Quirks mode");
}

HTML5 最终也把 compatMode 属性的实现标准化了。

3. head 属性

作为对 document.body(指向文档的元素)的补充,HTML5 增加了 document.head 属 性,指向文档的元素。可以像下面这样直接取得元素:

let head = document.head;

字符集属性

HTML5 增加了几个与文档字符集有关的新属性。其中,characterSet 属性表示文档实际使用的 字符集,也可以用来指定新字符集。这个属性的默认值是"UTF-16",但可以通过元素或响应头, 23 以及新增的 characterSeet 属性来修改。下面是一个例子:

console.log(document.characterSet); // "UTF-16"
    document.characterSet = "UTF-8";

标签:管理,焦点,加载,js,文档,HTML5,compatMode,document,属性
From: https://blog.51cto.com/u_16237074/9400067

相关文章

  • js CSS 类扩展
    自HTML4被广泛采用以来,Web开发中一个主要的变化是class属性用得越来越多,其用处是为元素添加样式以及语义信息。自然地,JavaScript与CSS类的交互就增多了,包括动态修改类名,以及根据给定的一个或一组类名查询元素,等等。为了适应开发者和他们对class属性的认可,HTML5增加了......
  • js matches()
    matches()方法(在规范草案中称为matchesSelector())接收一个CSS选择符参数,如果元素匹配则该选择符返回true,否则返回false。例如:if(document.body.matches("body.page1")){//true}使用这个方法可以方便地检测某个元素会不会被querySelector()或querySelectorAll()方......
  • js DOM 扩展
    尽管DOMAPI已经相当不错,但仍然不断有标准或专有的扩展出现,以支持更多功能。2008年以前,大部分浏览器对DOM的扩展是专有的。此后,W3C开始着手将这些已成为事实标准的专有扩展编制成正式规范。本章所有内容已经得到市场占有率名列前茅的所有主流浏览器支持,除非特别说明。Java......
  • python创建json文件并换行
     在Python中,您可以使用内置的json 模块创建和操作JSON文件。以下是如何创建一个JSON文件的步骤:1、Json格式JSON数据的书写格式是键(名称)/值对。JSON值可以是:字符串(在双引号中)、数组(在中括号中)、数字(整数或浮点数)、逻辑值(true或false)、对象(在大括号中)、null。JSON......
  • 光纤资源数字管理工具能为我们解决什么问题?
    光纤资源数字管理工具基于GIS地图结合数字孪生与物联网技术,以可视化的方式管理光纤资源,使得管理者更加高效、准确的做出决策。今天,我们结合nVisual来看一下,光纤资源数字管理工具能够为我们解决哪些问题?1、资产管理我们都有哪些设备与线路资源?资源位置在那?当故障问题发生时,如何快速......
  • AP4084 耐压24V的锂电池线性充电管理芯片
         AP4084是一款耐压24V的单节锂离子电池恒压恒流充电管理理芯片,充电电流可达600ma(SOT23-5,FBP2*2-6L,800ma(DFN2*2-8L),1A(ESOP8).由于线性充电器在输入和输出大压差情况下会严重发热,其内部有热反馈电路可以对在充电过程中对芯片温度加以控制,将充电电流调节到较低水平,以适......
  • AP4084 耐压24V的锂电池线性充电管理芯片
         AP4084是一款耐压24V的单节锂离子电池恒压恒流充电管理理芯片,充电电流可达600ma(SOT23-5,FBP2*2-6L,800ma(DFN2*2-8L),1A(ESOP8).由于线性充电器在输入和输出大压差情况下会严重发热,其内部有热反馈电路可以对在充电过程中对芯片温度加以控制,将充电电流调节到较低水平,以适......
  • n管理node版本
    不要下载最新版,推荐先下载稳定版的nodejs.org/zh-cn/downl…,下载完一键式安装即可,安装完成后,命令行查看是否成功。1、使用n切换node版本node有一个模块n,是专门用来管理node.js的版本的。npm是用来安装n的包管理工具,前端很多工具都可以通过npm来发布,而n是专门用来对node进行版本......
  • 企业IT基础资源管理的“帮帮团”上线啦——源启云原生基础设施管理平台
    为助力企业提升基础资源一体化管理和交付效率,以更先进的基础设施管理方式来满足现代企业业务持续扩展和复杂化的需要,中电金信运用基础设施即代码(InfrastructureasCode,简称IaC)技术,研发推出源启云原生基础设施管理平台。 01从“人控”到“智控”以自动设置代替手动调整 IaC......
  • [转]JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js
    原文地址:JavaScript:解决计算精度问题/mathjs/bignumber.js/big.js/decimal.js_js计算精度问题-CSDN博客一、计算精度现象举例举例1、加法 举例2、减法 举例3、乘法 举例3、除法 二、JS为什么会有计算精度的问题JavaScript内部只有一种数字类型Number,也就是说,Java......