移动端4位/6位验证码/密码输入框H5实现
阶段一、六位验证码输入框
先贴图，需要实现的效果是这样的。
实现思路有两个：
1、用6个input，输入一个数字后将focus给下一个输入框。
2、用一个input和6个span，input隐藏，用span显示。
现在大部分都是使用的第二种方法。
两种方案遇到的坑，以及优缺点，如下：
方案一：6个input。
主要就是用js切换focus，在安卓是相当流畅的，但是在ios会严重卡顿，简直逼死强迫症。
HTML：
JS：
function inputNext (id){ // 传过来的id是个对象
var index = Number(id.id.split("_")[1])
if (id.value.length < 1) { // 删除
id.value = ''
if (index > 1) {
var preId = 'check_' + Number(Number(index) - 1)
document.getElementById(preId).focus()
return false
}
} else {
if(id.value.length>1) {
var nextValue = id.value.slice(1, 2)
var nextId = 'check_' + Number(Number(index) + 1)
id.value = id.value.slice(0, 1)
if ((index+1) <= 6) {
document.getElementById(nextId).value = nextValue
document.getElementById(nextId).focus()
}
}
}
}PS：我这里写的删除方法是有问题的，这也是我果断放弃这种方案的原因之一。
如果正常输入，然后删除是可以的。
但是输入几个数后，先点击中间的框删除一个数字，再回到最后，便只能将中间到最后的这几个删掉，最前面的还需要手动点一下得到focus才能删除。
这对用户来说，简直太不友好了。。。
CSS：
.divYZM{
width: 90%;
margin: 0 auto;
height: 100px;
background-color: rgba(74, 35, 35, 0.42);
}
.numDiv{
display: block;
width: 10%;
float: left;
border-radius: 5px;
text-align: center;
line-height: 60px;
font-size: 20px;
font-weight: 900;
color: red;
background-color: white;
height: 60px;
border: 0;
padding: 0;
margin: 0;
margin-left: 5.7%;
top: 20px;
position: relative;
caret-color: transparent;
}这里遇到的坑，举一个栗子。
input限制长度的属性maxlength
a、与如下两种配合使用（tel也可以限制）
或者
b、当type为number时不起作用。这时需要用js控制。
注意：此外，tel类型的input在ios上会调出全数字键盘，而number类型的input则会调出带有标点符号的键盘。
方案二：1个input和6个span。
隐藏input，用span显示内容。大坑就是，何种情况下能调起ios的软键盘呢？
先贴一下我刚开始的input样式。
width: 0; height ：0； border: 0; padding: 0; margin: 0; 第二种 display:none;
简单粗暴，结果就是，ios木得反应。为啥呢，我想不通。
后来在晚上睡觉的时候我在想，我这两种方式input都么有占位啊，那是不是占位了就可以了呢？
经测果然是可以的（默默谴责自己懒了一下，没有将不隐藏input的情况，在手机上进行测试）。
但是这里要注意一点，input占位建议写成宽度占位，如果是高度占位，width为0时，会出现输入1234，显示为4321这种情况，光标默认在最前，且用js手动挪动光标到最后也是不起效果的。例如，类似代码我设置了宽度为0，且使用了如下方法挪动光标到最后，以解决输入1234，显示4321的问题。完全没得作用。后来突然想到是不是因为宽度为0。给input加了宽度才正常显示了。
错误代码示例：宽度为0
input的样式：
#yzm{
width: 0;
border: 0;
padding: 0;
margin: 0;
height: .44rem;
position: absolute;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
margin-left: -100%;
}
对应的挪动光标的方法：
let tObj = document.getElementById("#yzm");
let len = tObj.value.length;
if(tObj.setSelectionRange){
tObj.setSelectionRange(len, len);
tObj.focus();
}else if(tObj.createTextRange){
var rng = tObj.createTextRange();
rng.move('character', len);
rng.select();
}接下来贴正确代码。
CSS：
#yzm{
width: 90%;
height: .44rem;
border: 0;
padding: 0;
margin: 0;
margin-left: -100%;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
position: absolute;
}
#yzmTable {
width: 90%;
height: 100px;
margin: 0 auto;
background-color: rgb(44 12 12 / 93%);
border-radius: 5px;
}
#yzmTable span {
display: block;
width: 10%;
height: 60px;
float: left;
border-radius: 5px;
text-align: center;
line-height: 60px;
font-size: 20px;
font-weight: 900;
color: red;
background-color: white;
margin-left: 5.7%;
top: 20px;
position: relative;
}这里对input的样式也包括对光标的隐藏，我在第一种方案中对光标未进行处理，因为在看到ios的卡卡卡之后果断放弃了第一种方案。
HTML:
JS:
function intoYzm(index) {
var ele = document.getElementById("yzm")
ele.focus()
}
function yzmInsert() { // input内容改变时触发
for (var i = 1; i <= 6; i++) {
var nextId = 's_' + i
document.getElementById(nextId).innerHTML = ' '
}
var yzm = document.getElementById("yzm").value
var yzmArr = yzm.split('');
for (var i = 0; i < yzmArr.length; i++) {
const num = yzmArr[i];
var id = 's_' + Number(i + 1)
document.getElementById(id).innerHTML = ' ' + num + ' '
}
}
// 收起软键盘的方法，点击除了输入框之外的其他区域就收起软键盘
$('body').on('touchend', function(el) {
if(el.target.tagName != 'SPAN') {
$('yzm').blur()
}
})在第二种方案中有两个地方注意下：
a、在js方法中加了对全局中6个span标签（即六个输入框）之外区域点击事件的监听，用以收起软键盘，方法如下。
$('body').on('touchend', function(el) {
if(el.target.tagName != 'SPAN') {
$('yzm').blur()
}
})（比较粗糙，如果页面中还有别的部分就比较受影响了，可以自行改进）
b、在隐藏的input中添加了onclick方法，如下并且在其中用了blur方法使得此输入框失去焦点。为什么这么做呢？
因为此处的隐藏并非真正的隐藏，而是透明化处理，边框包括光标全部透明化，但实际上它还是占位的，所以当你点击输入框上方空白处时，仍会唤起软键盘，就和我们之前所想的点击输入框之外区域就收起软键盘冲突了。
因此将input自身的点击获取focus禁止掉，就OK了。
阶段二、四位验证码输入框
pia效果图
基本上是基于以上 阶段一、六位验证码输入方式（以下统称“阶段一”） 的后期填坑
这是仿照“阶段一”又新写了个验证码的小页面，有些微的不同
输入编号后四位，可能有X字母，所以隐藏input的type不能设置为number了，懒惰的我直接删掉了type属性（造坑开始）
且因为上次研究时漏掉了一些知识点，也造了一波坑，以下一一列举。
问题1、四位空格输入，1234，但是每次输入下一个数字，前面的内容都会整体向后移动，输完结果是4321；且输入一半点删除没反应。还得输入总共五位数字才能删除
？？！我懵了，input给显示的几个span的赋值方式（见“阶段一”的js代码）是一样样的呀，怎么回事
debug发现隐藏的input值就已经是4321了，所以不是赋值方法的问题，以下是有问题的隐藏input的样式：
#IdentifyNoCheckInput {
width: 0;
border: 0;
padding: 0;
margin: 0;
height: 10px;
position: absolute;
top: -11px;
outline: none;
color: transparent;
text-shadow: 0 0 0 transparent;
}最初怀疑是光标自动到了最前面导致的，使用了百度的手动移动光标方法，并不管用。
对比“阶段一”中隐藏input的样式，可以发现本次宽度设成了0，有高度（高度随意，只要不挡住别的元素显示就行），有宽度或高度是为了占位，能唤起软键盘。
而“阶段一”中是有宽度的，这个差别引起了我的怀疑。为以上样式新增两条
width: 100%; margin-left: -100%;
再进行输入，正常了，输入1234就显示1234，也不会有删不掉的情况存在了。
第一个坑填坑完毕。
总结：设置宽度高度是为了占位，从而唤起软键盘。有高度或有宽度就可以，但是建议设置宽度，以免发生输入内容反转的情况。
问题2、部分ios手机无法正常唤起软键盘
在测试的时候，手机型号就那几个，大家测得顺顺当当。上线之后就报了好多ios无法正常输入的问题。
问题版本如下：
苹果p8，苹果6+（系统版本10），苹果6pok（系统版本11.4.1）和苹果6p plus（系统版本12.4.8）
以下是隐藏input的代码：
最初思路跑偏，开始各种查版本兼容的方法，但是没有合适的解决方案。
后在老大的提醒下，既然上篇文章中的验证码没有报这个问题，这个也不应该有问题啊。
对比发现就是少了个type，就想到是不是缺少type导致的，加了个type="text"
emmmm，问题解决。
菜鸟教程描述如下：
大部分的坑都是自己给自己造的~~~
以下贴完整代码（我这个页面是以iframe被其他页面调用的，所以有个获取链接的操作以及拆分参数的方法）
请输入验证内容 -->
确认 4) { // 当type="number"，属性maxlength不起作用
inNo = inNo.slice(0, 4)
document.getElementById("IdentifyNoCheckInput").value = inNo
}
var inNoArr = inNo.split('');
for (var i = 0; i
- 微信小程序6位或多位验证码密码输入框功能的实现代码
- IOS实现输入验证码、密码按位分割
- 移动端 验证码/密码 输入框实现--安卓/ios适用
- 安卓实现支付宝6位密码输入界面
- 安卓实现支付宝6位密码输入界面
- IOS实现输入验证码、密码按位分割（二）
- 自定义 iOS 密码框或验证码输入框，支持多位验证码，4位或6位验证码自己选择。
- Android实现支付宝6位密码输入界面
- editbox实现文本和密码输入界面
- 转载--用javascript实现评估用户输入密码的强度
- 使用EditText的setTransformationMethod() 实现输入密码的显示,隐藏
- python实现简单的用户密码登录控制（输入三次就锁定用户）
- jQuery实现6位数字密码输入框
- 在登录页面设计中输入密码错误后弹框提示并返回到登录界面的代码实现
- 安卓仿支付宝/微信密码输入框-（最low代码实现）
- iOS实现类似微信和支付宝的密码输入框（UIKeyInput协议）
- android之EditText实现动态显示隐藏密码输入框的内容(实用)
- keychain实现ssh对秘钥免登陆免输入密码
- C语言编程中实现输入密码回显星号
- C语言实现密码输入