vue 输入框获取焦点

1）输入框给一个v-focus属性：

<input  ref="searchInput" v-focus>

2）自定义获得焦点指令：

 directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}},

3）点击事件触发聚焦

this.$nextTick( () => {this.$refs.searchInput.focus();})

完整代码：
<input@keyup="searchGame"ref="searchInput"v-focusclass="game__search-input"type="text"placeholder="搜索"v-model="searchGameName"><div  @click="handleKey"  class="game__pop-key-search"></div><script>
export default {name: 'SelectGame',components: {},data() {return{searchGameName: '', // 搜索名称}},directives: {focus: {// 指令的定义inserted: function(el) {el.focus();}}},methods: {/*** 点击开始搜索游戏*/searchGame () {3）点击事件触发聚焦this.$nextTick( () => {this.$refs.searchInput.focus();})let gameList = this.games;if (this.searchGameName !== '') {gameList = this.games.filter((item) => {return item.app_name.indexOf(this.searchGameName) !== -1})}this.picGameData(gameList);},/*** 点击字符搜索游戏*/handleKey() {this.$nextTick( () => {this.$refs.searchInput.focus();})}}
}

vue自定义指令知识：https://cn.vuejs.org/v2/guide/custom-directive.html

vue 输入框获取焦点相关推荐

解决安卓H5输入框获取焦点软键盘页弹起，页面高度被压缩问题
在移动项目开发中经常会遇到输入框获取焦点软键盘页弹起,页面高度被压缩,输入框获取焦点时弹不上去的问题,我本次的是vue的UI框架(vux) 解决办法如下代码: 只要在页面初始化完成的时候,获取屏幕的可 ...
android没有输入焦点类控件的输入法调用,Android 手机下输入框获取焦点时, 输入法会挡住输入框...
// Android 手机下输入框获取焦点时, 输入法会挡住输入框 // 解决方法: // Android 手机下, input 或 textarea 元素聚焦时, 主动滚动 if (/Android ...
html5文本框获取焦点,CSS3实现文本输入框获取焦点高亮显示
有看到一些网站的表单提交页面中,当文本宽获取焦点时会渐渐呈现出高亮显示的效果.本文通过CSS3实现了文本输入框获取焦点高亮显示的效果.代码如下: CSS代码: input[type=text]:foc ...
antd input框获取焦点点击输入历史保存的值后，背景颜色变成淡蓝色解决方法，输入框获取焦点后边框会有一圈淡蓝色光边
input:-internal-autofill-previewed, input:-internal-autofill-selected {// -webkit-text-fill-color: # ...
解决微信小程序输入框获取焦点光标偏移
如题:页面滚动后,点击输入框获取焦点,光标位置发生偏移解决方法:将页面元素整体放在<scroll-view></scroll-view>标签里 ,给<scroll-vi ...
VUE 输入框disabled颜色问题解决
VUE 输入框disabled颜色问题解决 input[disabled],input:disabled,input.disabled{ -webkit-text-fill-color:#333; - ...
【土旦】vue 解决ios H5底部输入框获取焦点时弹出虚拟键盘挡住输入框以及监听键盘收起事件...
问题描述 im聊天H5页面,在iOS系统下,inpu获取焦点弹出系统虚拟键盘时,会出现挡住input的情况,十分影响用户体验. bug图解决方法: html: <input type=&quo ...
vue输入框输入触发事件_.vue文件中监听input输入事件oninput详解
.vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件, ...
vue 输入框限制中英文及数字
vue 项目,通过 input 事件结合正则表达式实现输入框限制输入中英文及数字 <el-inputv-model.trim="value"@input="in ...

vue 输入框获取焦点

vue 输入框获取焦点相关推荐

最新文章

热门文章