uniapp微信小程序解决type=“nickname“获取昵称，v-model绑定值为空问题！_type="nickname

解决获取 type="nickname"值为空问题

效果图

开发工具效果图，真机上还会显示键盘输入框

Demo

• 如果通过 v-model 结合 @blur 获取不到值（个人测试，仅供参考）

<input type="nickname" v-model="nickName" @blur="blurNickName" placeholder="请输入昵称" maxlength="20" />
1

解决方式

通过表单收集内容

<form @submit="formSubmitInfoTap">
	<input type="nickname" name="nickName" placeholder="请输入昵称" maxlength="20" />
	
	<button class="submitBtn" type="primary" form-type="submit" size="large">确认</button>
</form>
1
2
3
4
5

formSubmitInfoTap(e) {
	let formdata = e.detail.value;
	console.log('获取昵称', formdata.nickName)
	// xxx
}
1
2
3
4
5

通过 uni.createSelectorQuery

• 定义ID

<input id="nickName" type="nickname" placeholder="请输入昵称" maxlength="20" />

<button type="primary" @click="avatarInfoTap">确认</button>
1
2
3

uni.createSelectorQuery().in(this)
    .select("#nickName")
    .fields({
        properties: ["value"],
    })
    .exec((res) => {  
        const nickName = res?.[0]?.value  
        console.log('获取昵称', nickName)
        // xxx
    })
1
2
3
4
5
6
7
8
9
10