介绍 & lt; form bindsubmit=癴ormSubmit"祝辞,
,& lt; view 类=& # 39;内容# 39;祝辞,
& lt;才能block 天气:为=皗{长度}},,天气:关键=癷tem"祝辞,
,,& lt; input 类=& # 39;iptbox& # 39;, value=https://www.yisu.com/zixun/" {{Value.length>=指数+ 1 ?价值(指数):“}}”禁用密码={{ispassword}}的catchtap=傲贰?
<输入name="密码"密码="{{真}}”类=ipt的最大长度="{{长度}}"专注=" {{isFocus}} " bindinput="焦点">
<视图>
<按钮类=" btn-area“formType="提交"> 提交
页面({,/* *大敌;
*,才能页面的初始数据,
*/才能,
数据:,{大敌;
长度:6日才能,,,,//输入框个数,
isFocus才能:真的,,,//聚焦,
价值才能:““,,,,,//输入的内容,
ispassword才能:真的,,//是否密文显示,真正为密文,,假为明文只
},大敌;
焦点(e){大敌;
var 才能;that =,,,
console.log才能(e.detail.value);,
var 才能;inputValue =, e.detail.value;,
,that.setData({大敌;
,,,的值:inputValue,,
}),才能
},大敌;
,利用(){
var 才能;that =,,,
,that.setData({大敌;
,,isFocus:真的,,
}),才能
},大敌;
,formSubmit (e) {,
console.log才能(e.detail.value.password);,
},大敌;
}) {内容,
,显示:flex,,
,justify-content:,空间;
,对齐项目:,中心;
200年,margin-top: rpx;,
},
iptbox {,
,宽度:80 rpx;,
,身高:80 rpx;,
,边界:1 rpx solid # ddd;,
,这个特性:20 rpx;,
,显示:flex,,
,justify-content:,中心;
,对齐项目:,中心;
,text-align:,中心;
},
ipt {,
,宽度:0,,
,身高:,0;
},
btn-area {,
,宽度:80%,,
,背景颜色:橙色,,
,颜色:白色;
}
这篇文章将为大家详细讲解有关怎样在微信小程序内开发验证码密码输入框功能,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
<强>一、效果图如下:
<强>二、代码部分
wxml:
js:
wxs:
<强>三,思路:
1,放置一个输入框,隐藏其文字和位置,同时设置支付输入框(表格)样式
2,当点击输入框时设置输入框为聚焦状态,唤起键盘,点击空白处,失去焦点,设为失去焦点样式,因为输入框宽高为0,所以不会显示输入框和光标,实现隐藏。
3,限制输入框最大字数并且监听输入框状态,以输入框值的长度作为输入框(表格)内容的渲染条件
4点击提交按钮时,获取输入框内容。
关于“怎样在微信小程序内开发验证码密码输入框功能”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。
