小程序实现密码输入框


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的高性能td和input切换并可修改内容实现代码
Jan 09 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
jquery对dom节点的操作【推荐】
Apr 15 Javascript
JS加载iFrame出现空白问题的解决办法
May 13 Javascript
jQuery下拉菜单的实现代码
Nov 03 Javascript
javascript 中Cookie读、写与删除操作
Mar 29 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
Oct 09 Javascript
JavaScript监听一个DOM元素大小变化
Apr 26 Javascript
js实现轮播图效果 纯js实现图片自动切换
Aug 09 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游戏编程25个脚本代码
2011/02/08 PHP
php设计模式 Command(命令模式)
2011/06/26 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
php网页病毒清除类
2014/12/08 PHP
Laravel重定向,a链接跳转,控制器跳转示例
2019/10/22 PHP
Firefox下提示illegal character并出现乱码的原因
2010/03/25 Javascript
js 小数取整的函数
2010/05/10 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
用jQuery获取IE9下拉框默认值问题探讨
2013/07/22 Javascript
JavaScript怎么判断图片是否加载完成以便获取其尺寸
2014/05/08 Javascript
javascript生成随机数的方法
2014/05/16 Javascript
使用FlexiGrid实现Extjs表格效果方法分享
2014/12/16 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
Webpack 实现 Node.js 代码热替换
2015/10/22 Javascript
微信小程序 wxapp内容组件 icon详细介绍
2016/10/31 Javascript
Node.js搭建小程序后台服务
2018/01/03 Javascript
AngularJS标签页tab选项卡切换功能经典实例详解
2018/05/16 Javascript
浅谈Vue组件及组件的注册方法
2018/08/24 Javascript
vue实现行列转换的一种方法
2019/08/06 Javascript
怎么理解wx.navigateTo的events参数使用详情
2020/05/18 Javascript
在Windows系统上搭建Nginx+Python+MySQL环境的教程
2015/12/25 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
Python列表解析配合if else的方法
2018/06/23 Python
pyspark.sql.DataFrame与pandas.DataFrame之间的相互转换实例
2018/08/02 Python
Keras: model实现固定部分layer,训练部分layer操作
2020/06/28 Python
Python连接mysql数据库及简单增删改查操作示例代码
2020/08/03 Python
Django windows使用Apache实现部署流程解析
2020/10/12 Python
python 多线程中join()的作用
2020/10/29 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
留学生如何写好自荐信
2013/12/27 职场文书
《孔子拜师》教学反思
2014/02/24 职场文书
市场开发计划书
2014/05/07 职场文书
2014年宣传思想工作总结
2014/12/10 职场文书
大脑的记忆过程在做数据压缩,不同图形也有共同的记忆格式
2022/04/29 数码科技