js 自动获取input焦点

项目需求:
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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,192评论 0 1
  • 33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方(存储到物理硬盘中)1、不能跨浏览器传输:在...
    萌妹撒阅读 2,154评论 0 2
  • 前端开发面试题 面试题目: 根据你的等级和职位的变化,入门级到专家级,广度和深度都会有所增加。 题目类型: 理论知...
    怡宝丶阅读 2,624评论 0 7
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 3,417评论 0 3
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,578评论 1 11