JS實現(xiàn)身份證輸入框的輸入效果

更新時間：2017年08月21日 15:59:08 作者：ZaynahLy

這篇文章主要介紹了JS實現(xiàn)身份證輸入框的輸入效果，非常不錯，具有參考借鑒價值,需要的朋友可以參考下

實現(xiàn)如圖所示的輸入效果：

這里寫圖片描述

實現(xiàn)這種效果，比較簡單的一種方式就是給一個input添加一個背景圖片，然后通過設(shè)置字間距來達(dá)到效果。

代碼：

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;
}

這樣的話就可以實現(xiàn)輸入框輸入效果了。

還有一種實現(xiàn)思路是，八個input標(biāo)簽排列，使用keyup事件，當(dāng)一個input輸入完成以后，光標(biāo)自動跳到下一個input。在實現(xiàn)過程中，我發(fā)現(xiàn)，雖然輸入可以實現(xiàn)，但是刪除的時候沒有辦法刪除，所以就沒有使用這種方法。

總結(jié)

以上所述是小編給大家介紹的JS實現(xiàn)身份證輸入框的輸入效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

js
輸入框

相關(guān)文章

微信小程序全局狀態(tài)的深入講解
這篇文章主要介紹了微信小程序全局狀態(tài)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03
JavaScript仿京東輪播圖效果
這篇文章主要為大家詳細(xì)介紹了JavaScript仿京東輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-02-02
javascript顯示倒計時控制按鈕的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨avascript顯示倒計時控制按鈕的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2016-06-06
JS繪制生成花瓣效果的方法
這篇文章主要介紹了JS繪制生成花瓣效果的方法,涉及javascript數(shù)學(xué)運算及頁面元素操作的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下
2015-08-08
Openlayers實現(xiàn)圖形繪制
這篇文章主要為大家詳細(xì)介紹了Openlayers實現(xiàn)圖形繪制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
javascript replace()方法的簡單分析
javascript中replace()在javascript中，String的函數(shù)replace()簡直太讓人喜愛了。它靈活而強(qiáng)大的字符替換處理能力，讓我不禁想向大家介紹它。
2008-11-11
bootstrap-table后端分頁功能完整實例
這篇文章主要介紹了bootstrap-table后端分頁功能,結(jié)合完整實例形式分析了bootstrap-table后端請求、數(shù)據(jù)分頁功能具體步驟與實現(xiàn)技巧,需要的朋友可以參考下
2020-06-06
基于JavaScript實現(xiàn)手機(jī)短信按鈕倒計時(超簡單)
在淘寶等購物網(wǎng)站，我們都會看到一個發(fā)送短信倒計時的按鈕，究竟是如何實現(xiàn)的呢？下面小編通過本篇文章給大家分享一段代碼關(guān)于js實現(xiàn)手機(jī)短信按鈕倒計時，需要的朋友參考下
2015-12-12
JavaScript實現(xiàn)中秋博餅游戲的示例代碼
中秋博餅習(xí)俗源于福建廈門，盛行于漳州的龍海、泉州的安海和金門縣等地。博餅的游戲規(guī)則簡單公平，既充滿競爭懸念，又富于生活情趣，本文將用JavaScript實現(xiàn)這一經(jīng)典游戲，感興趣的可以了解一下
2022-09-09
JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)
本篇文章主要是對JS將數(shù)字轉(zhuǎn)換成三位逗號分隔的樣式(示例代碼)進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2014-02-02