【博客大赛】+移动端4位/6位验证码/密码输入框H5实现

阶段一、六位验证码输入框

先贴图,需要实现的效果是这样的。

【博客大赛】+移动端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效果图

【博客大赛】+移动端4位/6位验证码/密码输入框H5实现【博客大赛】+移动端4位/6位验证码/密码输入框H5实现

基本上是基于以上  阶段一、六位验证码输入方式(以下统称“阶段一”)  的后期填坑

这是仿照“阶段一”又新写了个验证码的小页面,有些微的不同

输入编号后四位,可能有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,问题解决。

菜鸟教程描述如下:

【博客大赛】+移动端4位/6位验证码/密码输入框H5实现

大部分的坑都是自己给自己造的~~~

以下贴完整代码(我这个页面是以iframe被其他页面调用的,所以有个获取链接的操作以及拆分参数的方法)

                                                                    请输入验证内容                                     -->
                                                                            确认             4) { // 当type="number",属性maxlength不起作用
            inNo = inNo.slice(0, 4)
            document.getElementById("IdentifyNoCheckInput").value = inNo
        }
        var inNoArr = inNo.split('');
        for (var i = 0; i


文章版权声明

 1 原创文章作者:qiekk,如若转载,请注明出处: https://www.52hwl.com/34968.html

 2 温馨提示:软件侵权请联系469472785#qq.com(三天内删除相关链接)资源失效请留言反馈

 3 下载提示:如遇蓝奏云无法访问,请修改lanzous(把s修改成x)

 免责声明:本站为个人博客,所有软件信息均来自网络 修改版软件,加群广告提示为修改者自留,非本站信息,注意鉴别

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年7月15日 下午3:19
下一篇 2023年7月15日 下午3:21