首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么Safari在点击后不将`<button>`设置为`document.activeElement`?

Safari浏览器在点击后不将<button>设置为document.activeElement的原因是为了遵循Web标准和提供更好的用户体验。document.activeElement属性表示当前页面中获得焦点的元素,而Safari浏览器在点击<button>元素时,不会将其设置为document.activeElement

这种行为符合HTML规范中对于<button>元素的默认行为。根据HTML规范,点击<button>元素时,浏览器会触发按钮的点击事件,而不会将其设置为document.activeElement。这是因为<button>元素的主要目的是触发一个动作,而不是获取焦点。

这种设计决策可以提高用户体验,因为用户在点击按钮时通常不希望按钮成为焦点,而是希望执行按钮所代表的操作。如果浏览器将<button>设置为document.activeElement,可能会导致用户意外地将焦点放在按钮上,从而影响用户的操作流程。

虽然Safari浏览器在点击后不将<button>设置为document.activeElement,但开发者仍然可以通过JavaScript代码来手动设置<button>元素为焦点,以满足特定的需求。例如,可以使用element.focus()方法将焦点设置到<button>元素上。

腾讯云相关产品和产品介绍链接地址:

请注意,以上提到的腾讯云产品仅作为示例,其他云计算品牌商也提供类似的产品和服务。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

挥别web移动端开发差异和经典坑

web移动端 电话号码识别差异 iOS Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理电话链接,比如: 7 位数字,形如:1234567 带括号及加号的数字...描述:部分android系统点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样 解决: a,button,input,textarea{ -webkit-tap-highlight-color...滚动容器上增加滚动 touch 方法 .wrapper { -webkit-overflow-scrolling: touch; } 设置overflow : 设置外部 overflow hidden...,设置内容元素 overflow auto。...webp格式,安卓支持; 时间:201908 setData设置KB数有误 描述:虽然官方文档说 setData 设置数据的时候不能超过1024KB,小程序IOS下单次设置的数据不能超过1024kB

2.8K20

实战|这个炫酷的播放粒子效果,你也可以学会!使用Web动画API制作

---- 浏览器支持 我撰写本文时,除了Safari和Internet Explorer(IE是全民公敌、Safari是新时代的IE)之外,所有主流浏览器至少部分支持Web动画API。...HTML设置 该演示不需要太多的HTML,我们将使用一个 元素,但它可以是另一种类型的标签元素。如果我们真的想的话,我们甚至可以听到页面上的任何点击声,让粒子从任何地方弹出。...Click on me CSS设置 由于每个粒子都有一些共同的CSS属性,我们可以页面的全局CSS中设置它们。...JavaScript设置 这是我们将在JavaScript中执行的六个步骤: 监听按钮上的点击事件 创建30个 元素并将其附加到 每个粒子设置随机的宽度,高度和背景...,为了防止这种情况,我们可以全局CSS中每个粒子设置零不透明度。

1K10

CSS 下拉菜单与 focus

0 的。...首先,第一个坑——iOS Sasfari 浏览器中点击button 的时候是不会有 :focus 状态的,倒是原本 PC 上表示悬停的 :hover 可以点击(触摸)被激活。...若希望 点击保持 :focus 状态,则需要额外声明 tabindex 参数(不论是否有 href 参数)。碰巧的是,前面我们刚好设置了 tabindex,这个坑算是无意间跳过去了。...其次,当一个元素被聚焦时,点击一般的空白处无法使它失焦。这个问题很迷, iOS Safari 上 100% 复现而在 iOS Chrome 上完全无法复现。...至于如何修复,方才说到只要让其它元素聚焦就可以顶替掉这个聚焦的元素使其失焦,那么我们只需要让一个层级足够高的元素可以被聚焦——设置 tabindex 参数(最好 -1,原因自己往上翻)。

5.4K20

移动端Webapp中的那些Bug

2.2 解决方案 爬墙爬到这么一个issue,3楼eddiemonge老哥说到了,IOS下除非用户手动触发了输入框的focus事件,才会触发键盘,至于设置定时器也是不管用的;但是,手动点击一个按钮,在按钮的操作中再来执行...当然是靠想办法解决呀,后来我就想在输入框上贴一层蒙版,点击了之后消失,同时点击操作中,等到动画结束之后再执行输入框的focus,行不行呢?好期待。。。 ? html代码是这样的: // ......这样在上层的遮罩去掉之后,就可以300ms执行下面的link层中的事情,那么也算是用户真正地触发的点击行为,美滋滋。...(不过以我的测试情况来看,chrome和safari上滑动的时候输入框不再被激活,类似PC端滑动的时候采用了蒙版或者points-event: none;的效果) var thisFocus; var...== 'button' && target.type !

2.9K50

CSS魔法堂:稍稍深入伪类选择器

HTMLAnchorElement的4大经典伪类 :link,用于设置链接初始状态时的样式; :visited,用于设置链接被点击过后的样式; :hover,用于设置鼠标悬停在链接上方时,链接的样式;...那么传统上支持focus状态的元素必定是a、button、input、select和textareas....但可以通过鼠标点击 或 脚本时元素获得焦点。...JS获取当前得到焦点的元素 /* * 加载完成时默认返回body * 若某元素获得焦点时,则返回该元素 */ document.activeElement :: HTMLElement 另外还有一个让人误会的属性...:empty,用于设置没有子节点的元素的样式。div{ }存在TEXT_NODE子节点的元素,而div{}则为没有子节点的元素。 :not,作为谓语表达取反的语义。

1K20

你会在浏览器中打断点吗?我会!

设置 DevTools 中的代码行断点: 点击Sources选项卡 打开想要设置断点的文件 我们可以Sources的左侧文件目录中进行搜索 如果想调试的文件层级过于深,我们可以使用⌘ P的快捷键,通过文件名来搜索...打开Sources选项卡 打开想要设置断点的文件 找到代码行 代码行左侧是行号列,右键点击它。 选择Add conditional breakpoint。一个对话框显示代码行的下方。...设置日志点的步骤: 打开Sources选项卡。 打开想要设置断点的文件。 找到代码行。 代码行左侧是行号列。右键点击它。 选择Add logpoint。一个对话框显示代码行的下方。...设置 DOM 变更断点的步骤: 点击Elements选项卡。 找到我们想要设置断点的元素。 右键点击元素。...点击查询,我们就可以指定的接口查询中,进行断点处理。 还有一点,我们需要额外的说明,我们用SPA搭建页面,此时针对异步接口处理时,Axios是一个王者级别的解决方案。

39410

ASP.NET ViewState之详解

页框架使用视图状态各个回发之间保存控件设置。...各个回发之间保存值,而不将这些值存储会话状态或用户配置文件中,将信息存储视图状态中,这样在下次将该页发送到服务器时,代码便可以页加载事件过程中访问这些信息。...大家开发程序的时候,查看网页源代码。是不是都发现都多了一个ID名为__VIEWSTATE的hidden控件呢。这就是回发过程中保留的值。 ? 为什么要微软要开发这样一个功能呢?...比如:我有一个DropDownList控件,然后我点击了某个Button控件,Button对应的click事件下修改了DropDownList的默认选项,这时候,ViewState中就会记录DropDownList...EnableViewStatefalse就是禁用ViewState。 2.Button1_Click事件 ? ? 3.点击刷新按钮,触动回发 ?

1.4K30

Safari当chrome用(插件篇)

主页:http://autopagerize.net 点评:相信很多人曾经都有这么一个体会:当每次浏览网页、贴吧或者一些论坛时,PC端的页面中底部总会有这么几个字:“下一页”,只有当我们点击下一页才能浏览第二页的信息...它是一款自动翻页插件,当你的浏览到页面底部时,它便会帮你自动加载下一页的内容无缝拼接到当前页底部,省去你点击下一页的麻烦。 3. Scroll To Top Button ?...Safari Extension which adds a button that scrolls to the top of the page....主页:http://www.scrolltotopbutton.com 点评:Scroll To Top Button顾名思义就是页面中增加一个to top的按钮,点一下即可飞回页面顶部,该插件配合...我们经常会一次打开好多tab,很多是会用到的,又不舍得关,内存又耗着,这个时候点击下OneTab,你当前所有打开的页面都会被关闭,整合呈现成为一个列表,显示一个新打开的 OneTab 标签页中。

2.5K20

使用 tabindex 配合 focus-within 巧妙实现父选择器

CodePen -- tabindex 配合 focus-within 实现div的父选择器 一个小细节,button 的 focus 事件 Safari 和 firefox 的上冒泡问题 由于 input...而对于  元素,稍微有点特殊,存在这样两个问题,即: MacOS 的 Safari 和 Firefox 中, **点击  元素,不会触发  的 focus... Windows 的 Safari 和 Firefox 中, 点击  元素,会触发  的 focus 事件,但在被目标元素捕捉到之后,不会继续向上冒泡。 什么意思呢?... Windows 的 Safari,Firefox 下的表现: ? MacOS 的 Safari,Firefox 下的表现: ?...这一点,使用的时候务必需要留意。 CodePen -- button 的 focus 事件冒泡性验证(Chorme / Safari / Firefox) ?

1K10

按钮样式的正确方式

重置样式 通常,网站或应用程序中可点击事件的99.9%的元素应该是或元素。...尽管如此,开发人员很少使用元素。 整个Web上,我们可以看到很多触发JavaScript操作的按钮,仔细检查发现它们是用,或编码的。...浏览器“focus”和“active”(即按下)状态设置了默认样式,但通过重置按钮样式我们已经删除了其中的一些。 我们还希望鼠标悬停设置样式,总体而言,我们希望可见的样式与我们的设计相匹配。...这个功能还没有完全指定,但想法是浏览器只能在键盘或类似键盘的交互之后设置: :focus-visible,而不是点击。...它在整个页面上运行,并且仅在使用键盘时才将焦点可见的类设置接收焦点的元素。

3.6K20

记录工作中遇到的各种问题(Bug,总结,记录)

测试过程中发现,就算父组件不传递props,子组件的这个方法也会被调用,还不知道为什么 也许是做浅比较 {} !== {}  吧 ? 24....排除由 input[type="file"] 点击引起的 window.onblur事件 很简单,使用document.activeElement 来处理即可 28.  ...移动端动画 -webkit-animation-play-state:paused; 暂停状态Safari浏览器中失效 H5中播放音乐时,时常会用到播放时旋转,点击暂停,再点击就继续播放 ?...设置picker的选择文件按钮,时常点击无效(并不是重复选择文件、按钮初始被隐藏的无效)。...Mac的Safari中触发input[type="file"]点击失效 safari下会有很多安全性的问题,关于文件选择项的触发,原生的文件选择框的样式不太好修改,一般会隐藏掉然后用一个输入框代替,点击再触发文件的选择

17.9K12

一些你可能不知道的奇葩调试技巧

条件断点: 条件断点是一种高级的调试技巧,它允许我们某个特定的代码行设置断点,但这个断点只有满足某个特定条件时才会触发。...页面加载 7 秒才断点:performance.now() > 7000,当你想要设置断点,但只想在初始页面加载断点执行时会很有用。...你可以展示动画方法的条件断点中使用 console.trace 来运行代码,找到对应展示动画方法的最后一个栈追踪,点击调用源就可以跳转到对应的代码位置: 甚至我们还可以利用条件断点来帮助我们对函数进行性能分析...; setInterval(() => { if (document.activeElement !...例如,假设我们有以下形式的函数: function fn() { /* 某些代码 */ } 你可以自己的控制台里这样操作: debugger; fn(1); 然后点击 Step into next

16510

3w字长文带你【从0开发一个自己的前端组件库】 | 技术创作特训营第五期

包括以下内容: 为什么大厂都要建设自己的组件库 组件设计理论 组件开发顺序 环境搭建 storybook 样式处理 Button组件开发 单元测试 本地测试 打包 发布 为什么大厂都要建设自己的组件库...创建项目 使用create-react-app创建项目 终端执行如下命令: npx create-react-app curry-design --template typescript 执行,就会下载成功...组件开发 需求分析 以antd design的Button组件例 按钮类型: 按钮尺寸: 不可用状态: 基本使用 <Button size='large' type='primary' disabled...: string; /**设置 Button 的禁用 */ disabled?: boolean; /**设置 Button 的尺寸 */ size?...fireEvent.click(element) // 执行上述点击事件,使用toHaveBeenCalled来判断按钮是否被点击了,toHaveBeenCalled表示按钮被点击

56751

Jest与React Testing Library:前端测试的最佳实践

const button = screen.getByRole('button');fireEvent.click(button);清理和解构每个测试之后,确保清理掉任何副作用,如添加到DOM中的元素...expect(screen.getByText('Loading...')).toBeInTheDocument();});组件库的测试对于复杂的组件库,可以创建一个setupTests.js文件来设置全局的模拟和配置...以下是一些测试组件交互性的最佳实践:测试用户交互使用fireEvent模拟用户行为,例如点击、输入和选择:const input = screen.getByLabelText('Search');fireEvent.change...render(); act(() => { inputRef.current.focus(); }); expect(document.activeElement...{ container } = render(); expect(container.firstChild).toMatchSnapshot();});代码覆盖率阈值设置代码覆盖率阈值

8600
领券