移动端 验证码/密码 输入框实现--安卓/ios适用 - 蓝蓝设计_UI设计公司

帝皇彩票官网

追求卓越一诺千金

蓝蓝设计,2011年成立,主创清华团队,专注软件和互联网ui设计开发。擅长企业信息化管理、监控、大数据软件UIUE咨询和设计开发服务。立足UI,好好学习,天天进步!


移动端 验证码/密码 输入框实现--安卓/ios适用

2019-7-16 释然 前端及开发文章及欣赏


如果您想订阅本博客内容,每天自动发到您的邮箱中,

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



实现思路有两个:

 

1、用6个input,输入一个数字后将focus给下一个输入框。

2、用一个input和6个span,input隐藏,用span显示。

 

现在大部分都是使用的第二种方法。(当然,如果你能说服产品也可以只用一个普通的input输入框,就什么都不用考虑了)

 

两种方案遇到的坑,以及优缺点,如下:

 

方案一:6个input。

 

主要就是用js切换focus,在安卓是相当流畅的,但是在ios会严重卡顿,简直逼死强迫症。

 

HTML:

<div class="divYZM">
    <!-- onpropertychange是为了避免在ios中oninput方法不被触发 -->
    <input id="check_1" class="numDiv" type="number" oninput="inputNext(check_1)" onpropertychange="inputNext(check_1)"/>
    <input id="check_2" class="numDiv" type="number" oninput="inputNext(check_2)" onpropertychange="inputNext(check_2)"/>
    <input id="check_3" class="numDiv" type="number" oninput="inputNext(check_3)" onpropertychange="inputNext(check_3)"/>
    <input id="check_4" class="numDiv" type="number" oninput="inputNext(check_4)" onpropertychange="inputNext(check_4)"/>
    <input id="check_5" class="numDiv" type="number" oninput="inputNext(check_5)" onpropertychange="inputNext(check_5)"/>
    <input id="check_6" class="numDiv" type="number" oninput="inputNext(check_6)" onpropertychange="inputNext(check_6)"/>
</div>
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也可以限制)

<input type="text">  或者
<input type="password">
 

b、当type为number时不起作用。这时需要用js控制。

<input type="number" oninput="if(value.length>5) value=value.slice(0,5)" />
注意:此外,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的情况,在手机上进行测试)。

 

接下来贴正确代码。

 

CSS:

#yzm{
    width: 0;
    border: 0;
    padding: 0;
    margin: 0;
    height: .44rem;
    position: absolute;
    outline: none;
    color: transparent;
    text-shadow: 0 0 0 transparent;
    width: 300%;
    margin-left: -100%;
}
#yzmTable {
    width: 90%;
    margin: 0 auto;
    height: 100px;
    /* border: 1px solid red; */
    background-color: rgba(74, 35, 35, 0.42);
    /* opacity: 0.1; */
}
#yzmTable span { 
    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;
    margin-left: 5.7%;
    top: 20px;
    position: relative;
}
这里对input的样式也包括对光标的隐藏,我在第一种方案中对光标未进行处理,因为在看到ios的卡卡卡之后果断放弃了第一种方案。

 

HTML:

<input id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()">
<div id="yzmTable">
    <span id="s_1" onclick="intoYzm(1)">&nbsp;&nbsp;</span>
    <span id="s_2" onclick="intoYzm(2)">&nbsp;&nbsp;</span>
    <span id="s_3" onclick="intoYzm(3)">&nbsp;&nbsp;</span>
    <span id="s_4" onclick="intoYzm(4)">&nbsp;&nbsp;</span>
    <span id="s_5" onclick="intoYzm(5)">&nbsp;&nbsp;</span>
    <span id="s_6" onclick="intoYzm(6)">&nbsp;&nbsp;</span>
</div>
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 = '&nbsp;&nbsp;'
    }
    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 = '&nbsp;' + num + '&nbsp;'
    }
}
 
// 收起软键盘的方法,点击除了输入框之外的其他区域就收起软键盘
$('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 id="yzm" type="tel" maxlength="6" value="" oninput="yzmInsert()" onclick="this.blur();">
因为此处的隐藏并非真正的隐藏,而是透明化处理,边框包括光标全部透明化,但实际上它还是占位的,所以当你点击输入框上方空白处时,仍会唤起软键盘,就和我们之前所想的点击输入框之外区域就收起软键盘冲突了。

 

因此将input自身的点击获取focus禁止掉,就OK了。

 

之前都是自己乱七八槽的瞎记,第一次写给别人看,经验不足,时间仓促。不足之处,还望指正。

 蓝蓝设计www.bjhbys.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 平面设计服务


标签: 移动端 验证码/密码 输入框实现--安卓/ios适用 « 2020 年值得关注的 9 个交互设计趋势 | 帝皇彩票官网B端产品设计的6大挑战»


蓝蓝 http://www.bjhbys.com

  1. 帝皇彩票官网2020年1月(11)
  2. 2019年12月(50)
  3. 2019年11月(61)
  4. 2019年10月(49)
  5. 2019年9月(48)
  6. 2019年8月(58)
  7. 2019年7月(58)
  8. 2019年6月(58)
  9. 帝皇彩票官网2019年5月(31)
  10. 2019年4月(37)
  11. 2019年3月(43)
  12. 2019年2月(25)
  13. 2019年1月(45)
  14. 2018年12月(41)
  15. 2018年11月(40)
  16. 2018年10月(29)
  17. 2018年9月(40)
  18. 2018年8月(87)
  19. 2018年7月(107)
  20. 2018年6月(86)
  21. 2018年5月(110)
  22. 2018年4月(40)
  23. 2018年3月(35)
  24. 2017年8月(35)
  25. 2017年7月(45)
  26. 2017年6月(7)
  27. 2017年5月(27)
  28. 2017年4月(51)
  29. 2017年3月(70)
  30. 2017年2月(65)
  31. 2017年1月(69)
  32. 2016年12月(55)
  33. 2016年11月(111)
  34. 帝皇彩票官网2016年10月(92)
  35. 2016年9月(53)
  36. 2016年8月(9)
  37. 2016年7月(4)
  38. 2016年6月(9)
  39. 2016年3月(19)
  40. 2016年2月(26)
  41. 2016年1月(30)
  42. 2015年12月(33)
  43. 2015年11月(35)
  44. 2015年10月(46)
  45. 2015年9月(43)
  46. 2015年8月(40)
  47. 帝皇彩票官网2015年7月(33)
  48. 2015年6月(46)
  49. 2015年5月(58)
  50. 2015年4月(70)
  51. 2015年3月(55)
  52. 2015年2月(17)
  53. 帝皇彩票官网2015年1月(33)
  54. 帝皇彩票官网2014年12月(21)
  55. 2014年11月(84)
  56. 2014年10月(94)
  57. 2014年9月(6)
  58. 2014年8月(1)
  59. 2014年7月(13)
  60. 2014年6月(66)
  61. 2014年5月(99)
  62. 2014年4月(88)
  63. 2014年3月(102)
  64. 2014年2月(68)
  65. 2014年1月(83)
  66. 帝皇彩票官网2013年12月(106)
  67. 2013年11月(112)
  68. 帝皇彩票官网2013年10月(61)
  69. 2013年9月(20)
  70. 2013年7月(13)
  71. 2013年6月(27)
  72. 2013年5月(48)
  73. 2013年4月(39)
  74. 2013年3月(8)
  75. 帝皇彩票官网2013年2月(20)
  76. 2013年1月(31)
  77. 2012年12月(33)
  78. 2012年11月(31)
  79. 2012年10月(23)
  80. 2012年9月(8)
  81. 2012年7月(14)
  82. 2012年6月(15)
  83. 2012年5月(31)
  84. 2012年4月(24)
  85. 2012年2月(4)
  86. 2012年1月(8)
  87. 2011年12月(35)
  88. 2011年11月(32)
  89. 2011年10月(13)
  90. 2011年8月(1)
  91. 2011年6月(1)
订阅Rss
状元彩票官网 桔子彩票平台 帝皇彩票登陆 博发彩票APP下载 迪士尼彩乐园注册 左右棋牌 帝皇彩票开奖 桔子彩票平台 迪士尼彩乐园 吉利彩票开奖