javascript中focus()函数作用

JavaScript017

javascript中focus()函数作用,第1张

focus是获得焦点事件。

当一个文本框获得焦点时，它里面的文本就像“好123”网站上的百度搜索输入框那样全部被自动选中，这样的操作可以利用onfocus来实现。

以下的文本框，当鼠标指针移过去时，里面的文字全部被选中：

请输入网址

这是怎么做的呢？看以下代码及解释：

<input type="text"name="url" value="" size="30"onmousemove="this.focus()this.select()">

代码里，input标签内嵌入了onmousemove（鼠标指针经过）事件的JS语句，其等号后面的this.focus()意为其自身获得焦点；获得焦点的标志是该文本框内将出现输入光标，但要让其内的文字全部被选中，我们还得用上this.select()语句，它的意思就是选中全部文本框里的文字。

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

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

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

一、聚焦的时机

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

二、聚焦的元素

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

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

iView弹窗和输入框

网站导航