小程序实现密码输入框


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 相关文章推荐
Javascript客户端脚本的设计和应用
Aug 21 Javascript
基于jquery实现的服务器验证控件的启用和禁用代码
Apr 27 Javascript
基于jQuery的输入框无值自动显示指定数据的实现代码
Jan 24 Javascript
Jquery Uploadify多文件上传带进度条且传递自己的参数
Aug 28 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
Javascript缓存API
Jun 14 Javascript
Vue.js路由vue-router使用方法详解
Mar 20 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
关于在vue 中使用百度ueEditor编辑器的方法实例代码
Sep 14 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
JavaScript事件循环及宏任务微任务原理解析
Sep 02 Javascript
vue print.js打印支持Echarts图表操作
Nov 13 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
ThinkPHP令牌验证实例
2014/06/18 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
PHP的Trait机制原理与用法分析
2019/10/18 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
Javascript Request获取请求参数如何实现
2012/11/28 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
2018/01/24 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
2018/03/01 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
electron-vue开发环境内存泄漏问题汇总
2019/10/10 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
多个Vue项目部署到服务器的步骤记录
2020/10/22 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python回调函数用法实例分析
2015/05/09 Python
python中通过预先编译正则表达式提高效率
2017/09/25 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Pytorch反向求导更新网络参数的方法
2019/08/17 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Django微信小程序后台开发教程的实现
2020/06/03 Python
python中关于数据类型的学习笔记
2020/07/19 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
购买200个世界上最好的内衣品牌:Bare Necessities
2017/02/11 全球购物
基于Python 函数和方法的区别说明
2021/03/24 Python
班组长岗位职责范本
2014/01/05 职场文书
教职工代表大会主持词
2014/04/01 职场文书
城市规划应届毕业生自荐信
2014/07/04 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
小学生安全保证书
2015/05/09 职场文书
傲慢与偏见电影观后感
2015/06/10 职场文书
班主任经验交流心得体会
2015/11/02 职场文书
告诉你创业计划书的8个实用技巧
2019/07/12 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang