解决获取 type="nickname"值为空问题
文章目录
- 解决获取 type="nickname"值为空问题
- 效果图
- Demo
- 解决方式
- 通过表单收集内容
- 通过 uni.createSelectorQuery
效果图
开发工具效果图,真机上还会显示键盘输入框
Demo
- 如果通过
v-model
结合@blur
获取不到值(个人测试,仅供参考)
<input type="nickname" v-model="nickName" @blur="blurNickName" placeholder="请输入昵称" maxlength="20" />
解决方式
通过表单收集内容
<form @submit="formSubmitInfoTap">
<input type="nickname" name="nickName" placeholder="请输入昵称" maxlength="20" />
<button class="submitBtn" type="primary" form-type="submit" size="large">确认</button>
</form>
formSubmitInfoTap(e) {
let formdata = e.detail.value;
console.log('获取昵称', formdata.nickName)
// xxx
}
通过 uni.createSelectorQuery
- 定义ID
<input id="nickName" type="nickname" placeholder="请输入昵称" maxlength="20" />
<button type="primary" @click="avatarInfoTap">确认</button>
uni.createSelectorQuery().in(this)
.select("#nickName")
.fields({
properties: ["value"],
})
.exec((res) => {
const nickName = res?.[0]?.value
console.log('获取昵称', nickName)
// xxx
})