简单验证码输入框样式

项目页面需要输入验证码，可是百度了一下，没有找到简单的静态HTML样式。对于我一个初学者来说，没法直接拿过来就用。无奈之下，自己想了个办法，实现这个样式。因为现在上传资源最少要一分，所以现在拿出来在这里分享一下。

废话不说上代码

HTML:

<div style="width: 90%; max-width: 20rem; margin: 1.5rem auto" id="yzm"><style>#yzm > input {width: calc(15% - 1rem);height: 2rem;background: transparent;border: 0;border-bottom: 0.1rem solid black;line-height: 2rem;font-size: 1.4rem;margin: 0.5rem;text-align: center;}</style><input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" /><input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" /><input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" /><input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" /><input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" /><input type="number" onclick="$('#yzminput').focus()" name="yzmlist" readonly="readonly" /><input type="number" oninput="yzminput()" id="yzminput" style="width: 0; height: 0" />
</div>

SCRIPT:需要引用jquery；

function yzminput() {var str = $("#yzminput").val();var num = new Array();for (i = 0; i < str.length; i++) {num[i] = str.charAt(i);}$.each(document.getElementsByName("yzmlist"), function (i, v) {v.value = num[i];});if ($("#yzminput").val().length > 6)$("#yzminput")[0].value = $("#yzminput").val().substr(0, 6);
}

方法很简单：

1.先定义7个input，比验证码位数多一位。然后最后一个input使用宽高0的方法隐藏，其他input只读。

2.点击input时，focus最后一个隐藏的input。这样用户输入内容就会变更最后一个input的内容

3.最后一个input内容变更时，用oninput给其他input赋值，每个input放一个数字。完成。

这样的好处是：

1.获取验证码的时候只要获取最后一个input的值就可以了。

2.input的样式可以任意修改，比如背景，宽度，框线之类的。

不过也有缺点：

不能明显的提示用户，目前输入到了第几个字母，这个可以通过js完善一下。判断输入到了第几个框。

最重要的缺点是不显示输入光标。目前想不到办法解决

在微信中打开页面时，宽高为0时，输入数字时倒序的。目前没有找到办法，暂时想到的方法是：宽设为100%，高0，然后字体颜色设置为与背景色一致。

简单验证码输入框样式相关推荐

uniapp 实现验证码输入框
前言在实现页面的时候验证码输入的场景是比较常见的,如果使用一些前端 UI 组件会有这样的组件,可一些情况下需要自己去实现.比如小程序,如果过多依赖组件库,在一个小程序中仅使用一个组件库还好,引用组件 ...
一个自定义的安卓验证码输入框控件、银行卡归属类型查询
一个自定义的安卓验证码输入框控件.银行卡归属类型查询. GitHub:https://github.com/longer96/VerifyCode Dependency Gradle dependen ...
Flutter 完美的验证码输入框（2 种方法）
Flutter 完美的验证码输入框(2 种方法) 本文向您展示了在 Flutter 中实现完美的验证码输入框几种不同方法. 重点是什么? 真实世界的完美的验证码输入框或 PIN 输入 UI 通常满足 ...
js简单验证码的生成和验证
如何用js生成简单验证码,并验证是否正确的方法 1.html页面如下 <div><table border="0" cellspacing="5&quo ...
python+selenium自动识别简单验证码实现自动登录
目录一.所需要的库二.实现过程 1.引入库 2.打开网站 3.查找元素 4.识别验证码并输入 5.点击登录按钮,完成登录三.总结 1.完整代码 2.存在的问题一.所需要的库 time 控制程序 ...
Android中的验证码输入框
验证码.激活码各种码的输入框格日常使用里屡见不鲜了,四格的,六格的最近开发遇到这么一个输入14位序号(美观而需要输入框)的需求,本着这种简单控件,不重复造轮子的想法,开始全网搜寻ing- 但就是这么 ...
【Android】短信验证码输入框（80/100）
先看效果动图如下: 验证码输入框是常用的app功能页面,实现上并不复杂详情如下: 首先是布局xml文件如下: <?xml version="1.0" encoding=&qu ...
Android 短信验证码输入框
日常开发中,我们会遇到一些很炫酷的手机短信验证码输入,但系统自带的EditText显然并不能满足所需的短信验证码输入框,因此,在系统自带的EditText基础上自定义短信验证码输入框. 实现思路是:定 ...
android 自定义本地验证码demo,Android 自定义验证码输入框的实例代码(支持粘贴连续性)...
需求 1.能自定义输入框个数和样式 2.支持长按粘贴或剪切板内容自动填充(粘贴连续性) 其中第2点是最为重要的,正是其他人没有这点,逼得自己弄一个示例别人的示例: 粘贴居然不支持连续性,只能粘贴第 ...

简单验证码输入框样式

简单验证码输入框样式相关推荐

最新文章

热门文章