美文网首页
js 自动获取input焦点

js 自动获取input焦点

作者: web30 | 来源:发表于2019-11-29 10:56 被阅读0次

项目需求:
input 框在页面刷新时要自动选中input框(获取到input的焦点),目前vue中还没有功能可以实现,我们可以借助 js 操作 dom 来实现。

效果图:


image.png

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
        // 给要操作的dom元素设置ref属性值
        // 在选项mounted方法获取要操作的dom元素this.$refs.ref属性值
         <input type="text" ref="abc">
     </div>

    <script>
        new Vue({
            el: '#app',
            data: {},
            // 获取要操作的dom元素
            // 此方法类比window.onload
            mounted(){  //页面加载完后自动触发
                this.$refs.abc.focus()
            }
        })
    </script>
</body>
</html>

相关文章

网友评论

      本文标题:js 自动获取input焦点

      本文链接:https://www.haomeiwen.com/subject/sbpwwctx.html