小程序实现密码输入框


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 相关文章推荐
JQuery Tab选项卡效果代码改进版
Apr 01 Javascript
JavaScript中:表达式和语句的区别[译]
Sep 17 Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
layui分页效果实现代码
May 19 Javascript
js正则表达式校验指定字符串的方法
Jul 23 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
Aug 27 Javascript
js 实现watch监听数据变化的代码
Oct 13 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
May 06 Javascript
vue.js实现照片放大功能
Jun 23 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
discuz 首页四格:最新话题+最新回复+热门话题+精华文章插件
2007/08/19 PHP
php+javascript的日历控件
2009/11/19 PHP
如何使用php输出时间格式
2013/08/31 PHP
Drupal7 form表单二次开发要点与实例
2014/03/02 PHP
PHP获取当前所在目录位置的方法
2014/11/26 PHP
js获取url参数的使用扩展实例
2007/12/29 Javascript
jquery实现通用版鼠标经过淡入淡出效果
2014/06/15 Javascript
用js通过url传参把数据从一个页面传到另一个页面
2014/09/01 Javascript
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
vue生成随机验证码的示例代码
2017/09/29 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
vue全屏事件开发详解
2020/06/17 Javascript
跟老齐学Python之编写类之一创建实例
2014/10/11 Python
python3学生名片管理v2.0版
2018/11/29 Python
在Python函数中输入任意数量参数的实例
2019/07/16 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
一篇文章搞定Python操作文件与目录
2019/08/13 Python
opencv转换颜色空间更改图片背景
2019/08/20 Python
Python爬虫设置ip代理过程解析
2020/07/20 Python
CSS3绘制超炫的上下起伏波动进度加载动画
2016/04/21 HTML / CSS
详解通过变换矩阵实现canvas的缩放功能
2019/01/14 HTML / CSS
伊芙丽官方旗舰店:中国淑女一线品牌
2017/12/01 全球购物
行政部主管岗位职责
2013/12/28 职场文书
教育孩子心得体会
2014/01/01 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
大型会议接待方案
2014/03/01 职场文书
合作意向书范本
2014/03/31 职场文书
安全生产月演讲稿
2014/05/09 职场文书
2014年煤矿安全工作总结
2014/12/04 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
2015年城管个人工作总结
2015/05/15 职场文书
关于职业道德的心得体会
2016/01/18 职场文书
《包身工》教学反思
2016/02/23 职场文书
使用Canvas绘制一个游戏人物属性图
2022/03/25 Javascript
利用Python实时获取steam特惠游戏数据
2022/06/25 Python