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解決移動web開發(fā)手機(jī)輸入框彈出的問題
- JS驗證input輸入框（字母，數(shù)字，符號，中文）
- JavaScript控制輸入框中只能輸入中文、數(shù)字和英文的方法【基于正則實現(xiàn)】
- js監(jiān)聽input輸入框值的實時變化實例
- JS獲得多個同name 的input輸入框的值的實現(xiàn)方法
- JavaScript仿支付寶6位數(shù)字密碼輸入框
- JS通過正則限制 input 輸入框只能輸入整數(shù)、小數(shù)(金額或者現(xiàn)金) 兩位小數(shù)
- js格式化輸入框內(nèi)金額、銀行卡號
- Js制作點擊輸入框時默認(rèn)文字消失的效果
相關(guān)文章
這篇文章主要介紹了微信小程序接入騰訊云驗證碼的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-01-01
Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié)
這篇文章主要介紹了Bootstrap Table服務(wù)器分頁與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-08-08
javascript數(shù)據(jù)庫操作方法包括字符串大小寫，字符串搜索，提取字符串等2008-04-04
JavaScript高級程序設(shè)計閱讀筆記（十六） javascript檢測瀏覽器和操作系統(tǒng)-detect.js
javascript檢測瀏覽器和操作系統(tǒng) detect.js使用介紹，需要的朋友可以參考下2012-08-08
微信小程序?qū)崿F(xiàn)短信登錄的實戰(zhàn)
項目要求增加短信登錄及人臉識別登錄功能，本文就來實現(xiàn)一下 短信登錄功能，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
js獲取對象,數(shù)組所有屬性鍵值(key)和對應(yīng)值(value)的方法示例
這篇文章主要介紹了js獲取對象,數(shù)組所有屬性鍵值(key)和對應(yīng)值(value)的方法,涉及javascript對于對象、數(shù)組鍵名與鍵值遍歷相關(guān)操作技巧,需要的朋友可以參考下2019-06-06
6種JavaScript判斷對象自身為空的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了6種JavaScript判斷對象自身為空的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12
文件都是通過接口獲取的,前端通過調(diào)用接口將接口返回的文件下載,下面這篇文章主要給大家介紹了關(guān)于前端GET/POST請求下載文件的多種方式,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)抽獎器效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
分享9個最好用的JavaScript開發(fā)工具和代碼編輯器
這篇文章主要介紹了9個最好用的JavaScript開發(fā)工具和代碼編輯器,需要的朋友可以參考下2015-03-03