本来原生的h5 直接input type=“password” 这样会发现 也不是说不能输入数字。
只是让用户多了一步操作 的切换到数字的情况才能输入。 不知道安卓手机如何 反正苹果是这样的 (这样体验不好)
即使是你自己做一个数字键盘也是不行的,响应比较卡顿
(tips: 不让input输入框 弹出软键盘,直接设置readonly=true就可以)
但是有没有这种 password + number 这种组合形式嘛。
好像是没有吧
但是我们可以做一个出来。利用vue的双向绑定快速实现
tips 在password输入框上面搞一个透明的number输入框就实现了效果
<view class="input">
<!-- 密码输入框 -->
<u-field :field-style="{ 'padding-left': '20rpx'}" placeholder-style="color: #ccc;"
v-model="pass" type="password" maxlength="6" label="设置密码" placeholder="请输入6位数字交易密码">
</u-field>
<!-- 透明数字输入框 -->
<input type="number" class="pass-input" v-model="pass" maxlength="6"/>
</view>
data() {
return {
pass: '', // 交易密码
};
},
// 样式就是自己写吧。就是使用绝对定位把 number输入框放在 password上 然后设置 数字输入框 opacity: 0 即可
响应速度 也是原生的速度。这样效果就好多了
23天了 更新一下
关注我 持续更新。前端支持更新
–更新还有一种更简单的方式 也是博主推荐的—
就是原生的h5input标签有一个 inputmode属性 可以告诉浏览器调用那种键盘
有一个numeric 就是数字键盘 我们加上这个属性就可以
但是真的可以吗 因为u niapp编译的愿意 会让我们使用input标签给我们编译了。最终变成了。uni-input这种形式。
但是没有办法了吗。其实还是有的 通过js的方式可以给他重新加上
// 下面的是 h5环境哈
<input type="password" v-model="tradePass" id="numberic">
// 挂载阶段重新加上
mounted() {
document.querySelector('#numberic').children[0].children[1].setAttribute('inputmode', 'numeric')
},
哈哈 关注我哈