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. 组件属性设置不生效解决办法

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐