input框获得焦点,vue输入框自动获取焦点

　　主要介绍元素输入输入框自动焦点获取的实现，通过实例代码详细介绍，有一定的参考价值，感兴趣的朋友可以参考一下。

　　最近在项目中制作表单时，需要自动滚动到评论框，让评论框自动聚焦，这就需要手动触发输入框的聚焦状态。

　　但是元素不支持autofocus属性，所以只能通过原生js效果获得对焦效果。

　　document.getElementById(input )。焦点()；

　　或者也可以利用vue的ref属性来达到对焦的效果：

　　其实原理很简单。元素提供了焦点方法，但是文档没有指定如何调用它。下面是给el-input标签添加ref属性，然后在需要的地方直接调用方法。

　　El-input v-model= input placeholder=请输入内容 ref=input/el-input

　　这个。$nextTick(()={

　　这个。$refs.input.focus()

　　})

　　注意：一个页面只能有一种聚焦效果。

　　last , vue也支持自定义指令

　　当页面加载时，元素将获得焦点(注意：autofocus在移动Safari上不起作用)。事实上，只要你在打开这个页面后没有点击任何东西，这个输入框应该仍然是焦点。现在让我们用指令实现这个函数：

　　//注册一个全局自定义指令“v-focus”。

　　Vue.directive(focus ，{

　　//当绑定元素插入DOM时.

　　插入：函数(el) {

　　//焦点元素

　　焦点()

　　//元素用户界面

　　el.children[0]。焦点()

　　//元素有变化，比如show或者父元素变化，可以延迟或者判断。

　　setTimeout(_={

　　el.children[0]。焦点()

　　})

　　}

　　})

　　参考：https://cn.vuejs.org/v2/guide/custom-directive.html vue自定义命令

　　以上就是本文关于元素输入输入框自动焦点获取的实现。关于元素输入输入框的自动焦点获取的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。