js元素聚焦(vue)

JavaScript017

js元素聚焦(vue),第1张

其实聚焦本质上还是调用js的原生方法 focus() ,也就是说如果你想要某个DOM节点聚焦,只需要它调用这个方法就可以

弹窗打开时,自动聚焦到 input 输入框。

看似很简单,但是有两个容易出问题的地方:

一、聚焦的时机

当弹窗的开关变量为true时,你让相应的元素聚焦,但此时可能弹窗并没有渲染完成

二、聚焦的元素

当你使用第三方组件的 Input 输入框时,你为这个输入框标记了 ref ,但是获取到的是这个组件,而并不是组件中的 input

而你使用原生的 input 元素则不会有这个问题

iView弹窗和输入框

网站导航

需要准备的材料分别是:电脑、html编辑器、浏览器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html的<script>标签中,输入js代码:

$('body').append(document.activeElement.id == "a" ? 'true': 'false')

$('#a').focus(function () {

$('body').append(document.activeElement.id == "a" ? 'true': 'false')

})

3、浏览器运行index.html页面,此时会发现false代表没有聚焦,点击聚焦后发现打印了true。

用这个可以获取对象在浏览器的坐标 ,a表示事件对象,不知道是不是你想要的(ps:这是jquery的写法,需要另外加载jquery库,网上有得下载的,很好用)

var top = $(a).offset().top+$(a).height()

var left = $(a).offset().left