document.activeElement 获取焦点元素

最新推荐文章于 2022-08-18 22:31:44 发布
最新推荐文章于 2022-08-18 22:31:44 发布
阅读量1.5k 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://my.oschina.net/wolfx/blog/620252
版权

为什么80%的码农都做不了架构师？>>>   hot3.png

document.activeElement

document.activeElement三大浏览器(ie、firefox、chrome)都支持，但，针对的对象不同，返回的值也不同。

IE：

document.activeElement可获得所有聚焦的元素，包括input、textarea、div等。IE只关心光标聚焦的位置，不关心聚焦元素的性质。

chrome：

document.activeElement仅对input、textarea等标准的输入文本有效；对于div等非编辑类的元素(即使开启了contentEditable)，返回的值为BODY。

fireFox：

document.activeElement可获得所有聚焦的元素。包括input、textarea、div等。


转载于:https://my.oschina.net/wolfx/blog/620252

weixin_34110749
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
event.currentTarget和document.activeElement用法
09-27
firefox 的 event.currentTarget 和 ie 的 document.activeElement 这两个完全含义不一致的对象却被捆绑在一起做成了浏览器兼容代码。 大家在google搜索的时候 都会发现 document.activeElement || event.currentTarget 的用法。其实这样的用法是错误的，因为这两个属性
通过JS来判断页面控件是否获取焦点
10-26
因此，我们可以通过比较`document.activeElement`和目标控件来判断是否获取焦点，例如： ```javascript if (document.activeElement.id === '<%= TextBox1.ClientID %>') { // TextBox1 获得焦点 } ``` 总结...
document.activeElement
Focus-Fe
01-22 554
  document.activeElement   --------- 返回当前获得焦点的元素，只读的               如果没有选中，active的元素是body     浏览器支持：   Chrome2+ ff3+ IE4+ Opera 9.6+ Safari 4+           扩展阅读：     https://develop...
js document.activeElement获取焦点dom
weixin_43294560的博客
01-03 909
刚开始时:document.activeElement指向body 之后将指向焦点元素:如点击的按钮、输入框等 获取焦点元素: document.activeElement document.activeElement.tagName 获取节点名称,如BUTTON 手动绑定焦点元素 dom.focus(); ...
Document.ActiveElement
wangaihui813的专栏
12-13 1728
function document.onmousedown(){var srcElem = document.activeElementif (srcElem.value == "") srcElem.onblur = new Function("this.focus()")else srcElem.onblur = new Function("")}function document.onk
使用JS取得焦点(focus)元素代码
12-10
`document.activeElement` 是一个非常有用的属性，它允许开发者获取当前在文档中拥有焦点的元素。例如： ```javascript var focusedElement = document.activeElement; ``` 在创建自定义模态框或其他交互组件时，...
js 判断控件获得焦点的示例代码
10-26
`document.activeElement` 是JavaScript提供的一种内置属性，用于获取当前活动（即拥有焦点）的元素。这个属性是DOM（文档对象模型）的一部分，允许我们获取到浏览器当前窗口中被用户操作的元素。 以下是对`...
详细总结Javascript中的焦点管理
10-21
下面我们将深入探讨JavaScript中的焦点管理，主要包括焦点元素、`document.activeElement`属性、元素获得焦点的方式以及`focus()`方法。 焦点元素是网页中可以接收用户输入或键盘事件的元素。默认情况下，焦点主要...
js document.activeElement及使用
weixin_33794672的博客
05-25 4800
// 解决键盘弹出后挡表单的问题  // 解决键盘弹出后挡表单的问题 window.addEventListener('resize', function() { if( document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTA...
document.activeElement的使用
想好了再写！
07-27 5605
document.activeElement获取当前获得焦点的元素，在chrome总是得到body，后来经过试验得到结果如下： IE:document.activeElement可获得所有聚焦的元素，包括input、textarea、div等。IE只关心光标聚焦的位置，不关心聚焦元素的性质。 chrome:document.activeElement仅对input、textarea等标准的输入文本有效；对于div等非编辑类的元素(即使开启了contentEditable)，返回的值为BODY。 fireFo
用document.activeElement解决iframe跨域问题
weixin_33885676的博客
07-23 391
iframe里面一般都会使用别人的URL，没有很多交互，使用document.activeElement可以对iframe进行事件监听。使用下面的类进行测试： var IframeOnClick = { resolution: 200, iframes: [], interval: null, Iframe: function()...
Javascript焦点管理-document.activeElement
wujunlei1595848的博客
05-31 3778
document.activeElement指向页面中当前获得焦点的元素； 元素获得焦点的方式； 文档刚加载完，document.activeElement指向document.body； 文档加载期间，document.activeElement指向null。 ...
document.activeELement和antdesign-useForm
qq_46199553的博客
08-18 404
JavaScript中document.activeELement焦点元素
html 判断执行框,JavaScript中使用document.activeElement判断某一元素是否获取焦点
weixin_39738115的博客
06-27 661
JavaScript中可以使用document.activeElement判断某一元素是否获取焦点。或使用hasFocus()方法检测文档内任一元素是否获取焦点。1、javascript如何判断是否获得焦点的方法：JavaScript判断一个文本框是否获得焦点：//可以用document.activeElement判断//document.activeElement表示当前活动的元素//查找...
document.activeElement和event.srcElement的区别
germmy-神一样的开发
06-09 221
activeElement是focus的对象(Identifies the element that has the focus. This read-only property is set when you select a control in the interface or use the fo...
Chrome（谷歌浏览器）不识别document.documentElement.scrollTop
weixin_30847939的博客
03-23 205
做弹出浮动层时遇到一个问题，IE、Firefox下都能显示正常弹出层位置，但Chrome下弹出层显示在页面上面，经分析，发现Chrome无法识别document.documentElement.scrollTop。加上document.body.scrollTop后，则显示正常。 网友提示：由于document.documentElement.scrollTop和document.body.sc...
vue输入框获取焦点，键盘弹起问题
hi_JXL的博客
03-09 871
vue输入框获取焦点，键盘弹起问题 <input class="labelinput" placeholder="请输入您的姓名" type="text" v-model="myname" @blur="handleblur" > > <script> computed: { scrollHeight() { return document.documentElement.scrollTop || wind
用window.document.onkeydown 写一个demo实现上下左右键盘事件 控制光标焦点
最新发布
07-11
以下是一个示例，使用 `window.document.onkeydown` 来监听键盘事件，实现上下左右键控制光标焦点的功能： ```html <template> <div> <input ref="input1" type="text" /> <input ref="input2" type="text" /> <input ref="input3" type="text" /> <input ref="input4" type="text" /> </div> </template> <script> export default { mounted() { window.document.onkeydown = (event) => { const { key } = event; switch (key) { case "ArrowUp": this.moveFocus("up"); break; case "ArrowDown": this.moveFocus("down"); break; case "ArrowLeft": this.moveFocus("left"); break; case "ArrowRight": this.moveFocus("right"); break; } }; }, methods: { moveFocus(direction) { const inputs = [ this.$refs.input1, this.$refs.input2, this.$refs.input3, this.$refs.input4, ]; const focusedElement = document.activeElement; let currentIndex = -1; if (focusedElement) { currentIndex = inputs.findIndex((input) => input === focusedElement); } let nextIndex; switch (direction) { case "up": nextIndex = currentIndex - 2; break; case "down": nextIndex = currentIndex + 2; break; case "left": nextIndex = currentIndex - 1; break; case "right": nextIndex = currentIndex + 1; break; } if (nextIndex >= 0 && nextIndex < inputs.length) { inputs[nextIndex].focus(); } }, }, }; </script> ``` 在上述示例中，我们监听了 `window.document` 对象的 `onkeydown` 事件，并根据按下的键盘按键来执行相应的操作。在 `moveFocus` 方法中，我们获取了所有的输入框元素，并根据当前焦点元素的位置和移动方向来计算下一个焦点的位置，然后调用 `focus` 方法设置焦点到对应的输入框。 请注意，具体的实现方式可能因你所使用的框架或组件库而有所不同。上述示例是基于 Vue.js 的单文件组件，你可以根据自己的项目需求进行相应的调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值