脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 身份证输入框输入效果

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

 更新时间：2017年08月21日 15:59:08   作者：ZaynahLy  
这篇文章主要介绍了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实现身份证输入框的输入效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • 微信小程序全局状态的深入讲解

    微信小程序全局状态的深入讲解

    这篇文章主要介绍了微信小程序全局状态的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-03-03
  • JavaScript仿京东轮播图效果

    JavaScript仿京东轮播图效果

    这篇文章主要为大家详细介绍了JavaScript仿京东轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-02-02
  • javascript显示倒计时控制按钮的简单实现

    javascript显示倒计时控制按钮的简单实现

    下面小编就为大家带来一篇javascript显示倒计时控制按钮的简单实现。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • JS绘制生成花瓣效果的方法

    JS绘制生成花瓣效果的方法

    这篇文章主要介绍了JS绘制生成花瓣效果的方法,涉及javascript数学运算及页面元素操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • Openlayers实现图形绘制

    Openlayers实现图形绘制

    这篇文章主要为大家详细介绍了Openlayers实现图形绘制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2020-09-09
  • javascript replace()方法的简单分析

    javascript replace()方法的简单分析

    javascript中replace()在javascript中，String的函数replace()简直太让人喜爱了。它灵活而强大的字符替换处理能力，让我不禁想向大家介绍它。
    2008-11-11
  • bootstrap-table后端分页功能完整实例

    bootstrap-table后端分页功能完整实例

    这篇文章主要介绍了bootstrap-table后端分页功能,结合完整实例形式分析了bootstrap-table后端请求、数据分页功能具体步骤与实现技巧,需要的朋友可以参考下
    2020-06-06
  • 基于JavaScript实现手机短信按钮倒计时(超简单)

    基于JavaScript实现手机短信按钮倒计时(超简单)

    在淘宝等购物网站，我们都会看到一个发送短信倒计时的按钮，究竟是如何实现的呢？下面小编通过本篇文章给大家分享一段代码关于js实现手机短信按钮倒计时，需要的朋友参考下
    2015-12-12
  • JavaScript实现中秋博饼游戏的示例代码

    JavaScript实现中秋博饼游戏的示例代码

    中秋博饼习俗源于福建厦门，盛行于漳州的龙海、泉州的安海和金门县等地。博饼的游戏规则简单公平，既充满竞争悬念，又富于生活情趣，本文将用JavaScript实现这一经典游戏，感兴趣的可以了解一下
    2022-09-09
  • JS将数字转换成三位逗号分隔的样式(示例代码)

    JS将数字转换成三位逗号分隔的样式(示例代码)

    本篇文章主要是对JS将数字转换成三位逗号分隔的样式(示例代码)进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-02-02

最新评论