验证码输入框

clipboard.png

验证码输入框要如何设计??
毫无没头绪啊>_<
老铁们,说下思路>_<

阅读 4k
评论
    3 个回答
    • 2.3k

    四个div,js判断输完调下一个

      发一个偷鸡的想法,先把底部的横线切下来,然后做成背景图
      然后用letter-spacing 和padding 实现 嘿嘿 美滋滋

        首先是布局:不一定非要用div的,input一样能够做到布局上显示:

        看一下下面的预览:

        https://jsfiddle.net/td4rn5b4/

        注意 我是用了 input[type=number],移动端上能够唤起数字键盘输入验证码,比较友好。

        至于跳到下一个input,这个要监听输入即可,可以使用oninput如果输入了,并且长度为1,则自动跳到下一个input中,并且使其focus。

        上面的样式我在ios的safari、chrome、uc、微信内置浏览器都试过,没问题。PC预览会显示一个上下箭头,移动端不存在的。

        另外maxlength是为了你选择text的input类型设置的

          撰写回答

          登录后参与交流、获取后续更新提醒

          相似问题
          推荐文章