u-input自动获取焦点弹出键盘

最新推荐文章于 2024-09-26 17:07:55 发布

zhao_1127

最新推荐文章于 2024-09-26 17:07:55 发布

阅读量748

点赞数

文章标签：前端

原文链接：https://blog.csdn.net/weixin_45803990/article/details/118751790?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170591539716777224496462%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170591539716777224496462&biz_id=0&ut

版权

文章描述了在Vue组件UView中，当使用v-model绑定输入框value并触发onShow时，数字键盘会消失的问题。作者通过设置定时器在onShow中自动获取焦点解决了这个问题，同时提及了处理失焦状态的方法。

摘要由CSDN通过智能技术生成

<a href="https://blog.csdn.net/weixin_45803990/article/details/118751790?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522170591539716777224496462%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=170591539716777224496462&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~sobaiduend~default-1-118751790-null-null.142^v99^pc_search_result_base6&utm_term=firstFocus&spm=1018.2226.3001.4187">原文链接</a>

使用uview输入框绑定了v-model 获取输入框的值,发现value值变化后触发了页面onshow，数字键盘异常消失，查看组件参数和事件后，想起对应解决办法 ,欢迎指教！



<template>
	<view>
	    <u-input v-model="value"  type="number" shape="circle" border="surround" placeholder="请输入金额"
				 @focus="inputfocus" @blur="unfocused"  :focus="firstFocus" @change='firstChange'/>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				firstFocus:false,
                value: '',
			}
		},
		onShow() {
		    //调用fisrtChange
			this.firstChange()
		},
		methods: {
			firstChange() {
                // 如果input 绑定了value值 输入内容触发了onshow 会中断数字输入框
				// this.firstFocus = false; 
				setTimeout(() => {
					this.firstFocus = true; //自动获取焦点
				},0)
			},
            unfocused(){
				// 失焦后 聚焦状态改为false
				this.firstFocus = false
			},
		}
	}
</script>