JS实现身份证输入框的输入效果


Posted in Javascript onAugust 21, 2017

实现如图所示的输入效果:

JS实现身份证输入框的输入效果

实现这种效果,比较简单的一种方式就是给一个input添加一个背景图片,然后通过设置字间距来达到效果。

代码:

html:

<input type="text" maxlength="8" class="idInput" onkeyup='this.value=this.value.replace(/\D/gi,"")'>

css:

.idInput{
 width: 24.95rem;
 height: 4.7rem;
 background: url(../img/input_bg.png) center / contain no-repeat;
 font-size: 1.6rem;
 color: #1b1920;
 letter-spacing: 2.2rem; //最主要的部分,字间距
 padding-left: 1.2rem;
}

这样的话就可以实现输入框输入效果了。

还有一种实现思路是,八个input标签排列,使用keyup事件,当一个input输入完成以后,光标自动跳到下一个input。在实现过程中,我发现,虽然输入可以实现,但是删除的时候没有办法删除,所以就没有使用这种方法。

总结

以上所述是小编给大家介绍的JS实现身份证输入框的输入效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
常用js脚本
Dec 03 Javascript
自动完成JS类(纯JS, Ajax模式)
Mar 12 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
Oct 28 Javascript
angularjs表格分页功能详解
Jan 21 Javascript
微信小程序排坑指南详解
May 23 Javascript
JS中使用new Option()实现时间联动效果
Dec 10 Javascript
用JS实现一个简单的打砖块游戏
Dec 11 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
Dec 22 Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 Javascript
Vue自定义指令使用方法详解
Aug 21 #Javascript
javascript实现Java中的Map对象功能的实例详解
Aug 21 #Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 #Javascript
JavaScript中各数制转换全面总结
Aug 21 #Javascript
JQuery判断正整数整理小结
Aug 21 #jQuery
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
Aug 21 #Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 #Javascript
You might like
PHP 命令行工具 shell_exec, exec, passthru, system详细使用介绍
2011/09/11 PHP
php安全之直接用$获取值而不$_GET 字符转义
2012/06/03 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
PHP合并静态文件详解
2014/11/14 PHP
php获取用户浏览器版本的方法
2015/01/03 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHP获取二叉树镜像的方法
2018/01/17 PHP
Laravel 5.2 文档 数据库 ―― 起步介绍
2019/10/21 PHP
获取网站跟路径的javascript代码(站点及虚拟目录)
2009/10/20 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
js 走马灯简单实例
2013/11/21 Javascript
基于jQuery实现的单行公告活动轮播效果
2017/08/23 jQuery
微信小程序列表中item左滑删除功能
2018/11/07 Javascript
详解js 创建对象的几种方法
2019/03/08 Javascript
基于Vue2实现移动端图片上传、压缩、拖拽排序、拖拽删除功能
2021/01/05 Vue.js
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[52:20]VP vs VG Supermajor小组赛 B组胜者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
python批量查询、汉字去重处理CSV文件
2018/05/31 Python
Tesserocr库的正确安装方式
2018/10/19 Python
Python socket模块方法实现详解
2019/11/05 Python
Python对Tornado请求与响应的数据处理
2020/02/12 Python
Python3实现打印任意宽度的菱形代码
2020/04/12 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
资生堂英国官网:Shiseido英国
2020/12/30 全球购物
查环查孕证明
2014/01/10 职场文书
公司周年庆活动方案
2014/08/25 职场文书
2014年学生会部门工作总结
2014/11/07 职场文书
化验室岗位职责
2015/02/14 职场文书
工程进度款催款函
2015/06/24 职场文书
导游词之沈阳植物园
2019/11/30 职场文书
CSS3通过var()和calc()函数实现动画特效
2021/03/30 HTML / CSS
正确使用MySQL INSERT INTO语句
2021/05/26 MySQL