小程序实现密码输入框


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 相关文章推荐
ajax无刷新动态调用股票信息(改良版)
Nov 01 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
Jun 21 Javascript
js中生成map对象的方法
Jan 09 Javascript
JavaScript调试工具汇总
Dec 23 Javascript
JavaScript学习笔记之定时器
Jan 22 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JavaScript中Textarea滚动条不能拖动的解决方法
Dec 15 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
BooStrap对导航条的改造实践小结
Sep 21 Javascript
AngularJS中$apply方法和$watch方法用法总结
Dec 13 Javascript
MvcPager分页控件 适用于Bootstrap
Jun 03 Javascript
Vue组件通信之Bus的具体使用
Dec 28 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
一个简单的自动发送邮件系统(三)
2006/10/09 PHP
session在PHP大型web应用中的使用
2011/06/25 PHP
基于initPHP的框架介绍
2013/04/18 PHP
PHP中mb_convert_encoding与iconv函数的深入解析
2013/06/21 PHP
php与Mysql的一些简单的操作
2015/02/26 PHP
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
JS日历 推荐
2006/12/03 Javascript
判断文件是否正在被使用的JS代码
2013/12/21 Javascript
jquery实现保存已选用户
2014/07/21 Javascript
js实现div拖动动画运行轨迹效果代码分享
2015/08/27 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
2016/08/24 Javascript
zepto.js 实时监听输入框的方法
2018/12/04 Javascript
javascript面向对象程序设计实践常用知识点总结
2019/07/29 Javascript
vue实现匀速轮播效果
2020/06/29 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
vue组件中实现嵌套子组件案例
2020/08/31 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
Python实现爬取马云的微博功能示例
2019/02/16 Python
python打印9宫格、25宫格等奇数格 满足横竖斜相加和相等
2019/07/19 Python
python用Tkinter做自己的中文代码编辑器
2020/09/07 Python
html5图片上传预览示例分享
2014/04/14 HTML / CSS
全球性的在线时尚男装零售商:boohooMAN
2016/12/17 全球购物
英国打印机墨盒销售网站:Ink Factory
2019/10/07 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
办公室副主任职责范本
2014/03/08 职场文书
机关门卫的岗位职责
2014/04/29 职场文书
合作协议书格式
2014/08/19 职场文书
三问三解心得体会
2014/09/05 职场文书
见习报告格式范文
2014/11/08 职场文书
2015年保送生自荐信
2015/03/24 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
工伤劳动仲裁代理词
2015/05/25 职场文书
中学后勤工作总结2015
2015/07/22 职场文书