Vue中输入框自动获取焦点的三种方式
2020-07-07 10:49
5107 查看
Vue中输入框自动获取焦点的三种方式
方式一:原生JS操作DOM
<template> <div class="focusDemo"> <input type="text" v-model="username" id='inputId'/> </div> </template> <script> export default { data () { return { username: '' } }, mounted () { document.getElementById('inputId').focus() } } </script>
方式二:ref方式实现
<template> <div class="focusDemo"> <input ref="inputName" type="text" v-model="username" /> </div> </template> <script> export default { data () { return { username: '' } }, mounted () { this.$nextTick(() => { this.$refs.inputName.focus() }) } } </script>
方式三:使用自定义指令
main.js中
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时 inserted: function (el) { // 聚焦元素 el.focus() }, update: function (el) { // 聚焦元素 el.focus() } })
vue文件中
<template> <div class="focusDemo"> <input type="text" v-model="username" v-focus /> </div> </template> <script> export default { data () { return { username: '' } } } </script>
相关文章推荐
- Angular解决输入框由禁用状态转可用状态自动获取焦点失效问题
- vue页面刷新文本框自动获取焦点
- vue自动获取焦点指令
- vue自动获取焦点?
- 多个input输入框 限制每个输入框输入一位 输入完成自动获取下一个input焦点
- vue移动端input,自动获取焦点+滑动列表隐藏软键盘+点击搜索隐藏软键盘
- Vue--由自动获取焦点引出的DOM、mounted、自定义指令
- popuWindow 底部弹出输入框并获取焦点,软件盘自动弹起和关闭
- jQuery自动补全autocomplete插件使用,三种获取数据源方式具体实现(true)
- vue 自定义指令自动获取文本框焦点的方法
- vue监听输入框获取焦点
- vue 自定义指令自动获取文本框焦点
- HTML中Input输入框提示/设置禁用/自动获取焦点
- 微信小程序采坑三:输入框设置自动获取焦点后无法自动获取焦点
- 鼠标自动选中和获取焦点的输入框
- 进到页面后input输入框自动获取焦点
- 让android的控件EditText不自动获取焦点
- android中获取布局文件的三种方式
- input自动获取焦点在移动端自动弹出手机软键盘
- Web前端-JS效果-图片自动获取焦点与切换