H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】验证码输入框

clipboard.png

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

回答:

四个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类型设置的

本文地址:H5W3 » 【Web前端问题】验证码输入框

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址