小程序实现密码输入框


Posted in Javascript onNovember 16, 2020

本文实例为大家分享了小程序实现密码输入框的具体代码,供大家参考,具体内容如下

小程序密码输入框

wxml

<view class="Toptitle">请设置支付密码并妥善保管</view>
<form bindsubmit="formSubmit">
 <view class='content'>
 <block wx:for="{{Length}}" wx:key="item">
  <input class='iptbox' value="{{Value.length>=index+1?Value[index]:''}}" disabled password='{{ispassword}}' catchtap='Tap'></input>
 </block>
 </view>
 <input name="password" password="{{true}}" class='ipt' maxlength="{{Length}}" focus="{{isFocus}}" bindinput="Focus"></input>
 <view>
 <button class="btn-area" type='primary' disabled='{{disabled}}' formType="primary">下一步</button>
 </view>
</form>

wxss

/* pages/mima/mima.wxss */
.Toptitle{
 text-align: center;
 margin: 60rpx auto 46rpx;
 font-size: 26rpx;
}
.content{
 width: 660rpx;
 padding:0 45rpx;
 display: flex;
 justify-content: space-around;
 align-items: center;
 margin-top: 100rpx;
}
.iptbox{
 width: 110rpx;
 height: 96rpx;
 border:1rpx solid #ddd;
 box-sizing: border-box;
 display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
}
.ipt{
 width: 0;
 height: 0;
}
.btn-area{
 width: 80%;
 margin-top: 60rpx;
}

js

Page({
 data: {
 Length: 6,  //输入框个数
 isFocus: true, //聚焦
 Value: "",  //输入的内容
 ispassword: true, //是否密文显示 true为密文, false为明文。
 disabled:true,
 },
 Focus(e) {
 var that = this;
 console.log(e.detail.value);
 var inputValue = e.detail.value;
 var ilen = inputValue.length;
 if(ilen == 6){
  that.setData({
  disabled: false,
  })
 }else{
  that.setData({
  disabled: true,
  })
 }
 that.setData({
  Value: inputValue,
 })
 },
 Tap() {
 var that = this;
 that.setData({
  isFocus: true,
 })
 },
 formSubmit(e) {
 console.log(e.detail.value.password);
 },
 
 onLoad: function (options) {
 
 },
 onShow: function () {
 
 },
})

以上仅供参考,主要方便自己学习!

为大家推荐现在关注度比较高的微信小程序教程一篇:《微信小程序开发教程》小编为大家精心整理的,希望喜欢。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Document 对象的常用方法
Jul 31 Javascript
jquery获取焦点和失去焦点事件代码
Apr 21 Javascript
如何解决Jquery库及其他库之间的$命名冲突
Sep 15 Javascript
JavaScript通过this变量快速找出用户选中radio按钮的方法
Mar 23 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
Three.js学习之Lamber材质和Phong材质
Aug 04 Javascript
简单谈谈JS数组中的indexOf方法
Oct 13 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
vue之浏览器存储方法封装实例
Mar 15 Javascript
bootstrap select2插件用ajax来获取和显示数据的实例
Aug 09 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
vue 使用localstorage实现面包屑的操作
Nov 16 #Javascript
适用于 Vue 的播放器组件Vue-Video-Player操作
Nov 16 #Javascript
Vue中使用JsonView来展示Json树的实例代码
Nov 16 #Javascript
Vue 数据绑定的原理分析
Nov 16 #Javascript
Vue 使用iframe引用html页面实现vue和html页面方法的调用操作
Nov 16 #Javascript
Vue指令实现OutClick的示例
Nov 16 #Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 #Javascript
You might like
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
codeigniter框架The URI you submitted has disallowed characters错误解决方法
2014/05/06 PHP
PHP面向对象之里氏替换原则简单示例
2018/04/08 PHP
arguments对象
2006/11/20 Javascript
javascript实现的网页局布刷新效果
2008/12/01 Javascript
jquery清空textarea等输入框实现代码
2013/04/22 Javascript
用Javascript获取页面元素的具体位置
2013/12/09 Javascript
快速解决jquery之get缓存问题的最简单方法介绍
2013/12/19 Javascript
JavaScript实现的图像模糊算法代码分享
2014/04/22 Javascript
angularjs表格ng-table使用备忘录
2016/03/09 Javascript
微信小程序 radio单选框组件详解及实例代码
2017/01/10 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
Node.JS利用PhantomJs抓取网页入门教程
2017/05/19 Javascript
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
详解Puppeteer前端自动化测试实践
2019/02/21 Javascript
实用的Vue开发技巧
2019/05/30 Javascript
JS实现json数组排序操作实例分析
2019/10/28 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
vue-cli3配置favicon.ico和title的流程
2020/10/27 Javascript
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
python实现颜色rgb和hex相互转换的函数
2015/03/19 Python
python写程序统计词频的方法
2019/07/29 Python
python-docx文件定位读取过程(尝试替换)
2020/02/13 Python
pytorch dataloader 取batch_size时候出现bug的解决方式
2020/02/20 Python
Python的轻量级ORM框架peewee使用教程
2021/02/05 Python
介绍一下Linux文件的记录形式
2013/09/29 面试题
优秀应届毕业生自荐信
2013/11/16 职场文书
国际商务专业毕业生自我鉴定2014
2014/09/27 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
人大代表选举标语
2014/10/07 职场文书
2014年幼师工作总结
2014/11/22 职场文书
公司庆典欢迎词
2015/01/26 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js