博客

uni-app input标签之间的焦点（Focus属性）切换无效问题

最近用uni-app 做app时，遇到了这样一个需求：

当一个页面存在多个input输入框的时候，用户输入数据后点击确认按钮，焦点自动 聚集到下一个input标签。

思路很简单，只需要改变input标签的 Focus属性就行了

<input  :focus="Focus1" @confirm="confirm"/>
<input  :focus="Focus2"/>

export default {
	data() {
		return {
			Focus1: false,	
			Focus2: false,			
		}
	},
	methods: {
		confirm(){
			uni.hideKeyboard();	//隐藏软键盘				
			this.Focus2 = true;
		 },
	},
}

如果像上面这样写的话，只有第一次点击确认按钮的时候焦点会从第一个input跳转到下一个input。

将confirm做如下改变：

confirm(){
			uni.hideKeyboard();	//隐藏软键盘				
			this.Focus2 = false;
			this.$nextTick(function() {
					this.Focus2 = true;
				});
		 },

具体原因可以去uni-app官网看看：


uni-app常见问题

4. 组件属性设置不生效解决办法