当前位置:   article > 正文

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

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
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/我家自动化/article/detail/743489
推荐阅读
相关标签
  

闽ICP备14008679号