uniapp 获取焦点的那些坑

uniapp 自动获取焦点

在 uniapp 日常开发中常常会遇到需要制动获取文本框焦点的时候，下面我把大家可以爬的坑都爬完了。

1. 首先得在 input 元素上设置 foucs 属性，并且绑定一个变量。

<input class="inputs" type="text" v-model="first" :focus="firstFocus" @change='firstChange'/>

2. 然后将变量在 data 里面初始化为 false。

firstFocus: false

3. 然后再 methods 里绑定方法，初始化 focus 属性后就可以将任意一个的 input 元素获取焦点了。

// 第一个文本框 change 事件
firstChange() {
	this.secondFocus = false; // 每次都要初始化 focus 属性
	setTimeout(() => {
		this.secondFocus = true; // this.secondFocus 是第二个文本框的 focus 属性。
	}，0)
}

上四个文本框的完整代码

<template>
	<view class="content">
			<view class="input-row">
				<view class="titleview"><text class="title">第一个文本框:</text></view>
				<input class="inputs" type="text" v-model="first" :focus="firstFocus" @change='firstChange' />
			</view>
			<view class="input-row">
				<view class="titleview"><text class="title">第二个文本框 :</text></view>
				<input class="inputs" type="text" v-model="second" :focus="secondFocus" @change='secondChange' />
			</view>
			<view class="input-row">
				<view class="titleview"><text class="title">第三个文本框:</text></view>
				<input class="inputs" type="text" v-model="third" :focus="thirdFocus" @change='thirdChange' />
			</view>
			<view class="input-row">
				<view class="titleview"><text class="title">第四个文本框:</text></view>
				<input class="inputs" type="text" v-model="fourth" :focus="fourthFocus" @change='fourthChange' />
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				first: '',
				firstFocus: false,
				second: '',
				secondFocus: false,
				third: '',
				thirdFocus: false,
				fourth: '',
				fourthFocus: false
			}
		},
		methods: {
			// 第一个文本框 change 事件
			firstChange() {
				this.initialization();
				setTimeout(() => {
					this.secondFocus = true;
				},0)
			},
			// 第二个文本框 change 事件
			secondChange() {
				this.initialization();
				setTimeout(() => {
					this.thirdFocus = true;
				},0)
			},
			// 第三个文本框 change 事件
			thirdChange() {
				this.initialization();
				setTimeout(() => {
					this.fourthFocus = true;
				},0)
			},
			// 第四个文本框 change 事件
			fourthChange() {
				this.initialization();
				setTimeout(() => {
					this.firstFocus = true;
				},0)
			},
			// 初始化所有焦点变量
			initialization() {
				this.firstFocus = false;
				this.secondFocus = false;
				this.thirdFocus = false;
				this.fourthFocus = false;
			},
		}


	}
</script>

注意的点

1. 每次想要自动获取焦点的时候要把所有的 focus 属性全部初始化为 false。
2. 同时只允许一个 focus 属性为 true。
3. 设置延时函数的作用是因为如果聚焦到下一个文本框后想重新回来修改当前的文本框会导致聚焦失败。
4. setTimeout 也可以用 this.nextTick 代替，都是在页面元素重新渲染之后才会执行内部代码。