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')},

哈哈关注我哈

uniapp，vue中h5项目实现数字密码键盘相关推荐

vue中h5项目怎么使用weui
注:项目使用vue cli脚手架,最新版脚手架创建项目参考这里一.安装weui 安装weui js文件和css文件: cnpm i weui.js weui --S 二.将文件引入项目中在main ...
vue 微信公众号支付接口_基于vue的h5项目之支付宝支付与微信支付
本文仅记录基于vue开发h5项目过程中使用支付宝和微信支付过程中的重点与槽点,仅为前端部分,如有疏漏不正之处,请于文末评论探讨.注意:标红部分灰常重要,仔细阅读官方文档非常重要,耐心非常重要,细心非常 ...
vue做h5项目横屏
vue做h5项目横屏竖屏切换,主要叙述横屏样式逻辑是旋转页面就可以页面代码结构: <div class="widDiv"><div></div&g ...
使用HBuilderX将vue或H5项目打包app
好久没有搞过将vue项目打包成app了,这两天刚好项目需要将vue开发的H5项目打包成APP,那就简单记录一次呗(之前也写过一篇打包app,是将项目使用hbuilder打开,转为webapp什么的,就 ...
【仅为记录】vue的H5项目在IOS上打开白屏问题
记录同事踩得一个坑,关于vue的H5项目在ios上白屏 ios上的H5应用打开是一片白屏,说实话刚遇到的时候真是麻了,恨不得给所有测试人都买一部安卓机(bushi) 上网搜了下,最后解决问题的,是在初 ...
vue中h5页面的搭建
在工作中可能会遇到h5页面的搭建,本篇文章主要讲解如何从零开始搭建一个vue项目,实现h5页面的适配,浏览器默认样式的清除,路由的配置,项目的打包等,那就让我们开始学习吧. 如果大家只是需要一个完整的 ...
Uniapp/Vue中引入使用阿里图标
一.uniapp中引入阿里图标将图标加入购物车部分省略 1.下载阿里图标到本地,uniapp不支持symbol格式 2. 打开下载的压缩包,只需要inconfont.css ,将其放到我们的项目 s ...
vue 搭建H5项目及适配
1.创建项目 vue create test (项目名称) vue2完整创建流程 2.进行H5适配 2.1 选择ui框架(以vantui 为例) 具体 ...
围观，听说你用Vue写H5项目了？
没错,我用Vue写了一个H5项目,来看下我踩坑记录吧. 1.按需引入在开发过程中,会遇到很多五花八门的库.其实这些库中有很多功能/模块是用不到的,所以,这里推荐按需引入: import { Slid ...

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

uniapp，vue中h5项目实现数字密码键盘相关推荐

最新文章

热门文章