uniapp，vue中h5项目实现数字密码键盘

本来原生的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')
		},

哈哈 关注我哈