JS實(shí)現(xiàn)身份證輸入框的輸入效果
實(shí)現(xiàn)如圖所示的輸入效果:
實(shí)現(xiàn)這種效果,比較簡(jiǎn)單的一種方式就是給一個(gè)input添加一個(gè)背景圖片,然后通過(guò)設(shè)置字間距來(lái)達(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; }
這樣的話(huà)就可以實(shí)現(xiàn)輸入框輸入效果了。
還有一種實(shí)現(xiàn)思路是,八個(gè)input標(biāo)簽排列,使用keyup事件,當(dāng)一個(gè)input輸入完成以后,光標(biāo)自動(dòng)跳到下一個(gè)input。在實(shí)現(xiàn)過(guò)程中,我發(fā)現(xiàn),雖然輸入可以實(shí)現(xiàn),但是刪除的時(shí)候沒(méi)有辦法刪除,所以就沒(méi)有使用這種方法。
總結(jié)
以上所述是小編給大家介紹的JS實(shí)現(xiàn)身份證輸入框的輸入效果,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- JS解決移動(dòng)web開(kāi)發(fā)手機(jī)輸入框彈出的問(wèn)題
- JS驗(yàn)證input輸入框(字母,數(shù)字,符號(hào),中文)
- JavaScript控制輸入框中只能輸入中文、數(shù)字和英文的方法【基于正則實(shí)現(xiàn)】
- js監(jiān)聽(tīng)input輸入框值的實(shí)時(shí)變化實(shí)例
- JS獲得多個(gè)同name 的input輸入框的值的實(shí)現(xiàn)方法
- JavaScript仿支付寶6位數(shù)字密碼輸入框
- JS通過(guò)正則限制 input 輸入框只能輸入整數(shù)、小數(shù)(金額或者現(xiàn)金) 兩位小數(shù)
- js格式化輸入框內(nèi)金額、銀行卡號(hào)
- Js制作點(diǎn)擊輸入框時(shí)默認(rèn)文字消失的效果
相關(guān)文章
Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié)
這篇文章主要介紹了Bootstrap Table服務(wù)器分頁(yè)與在線編輯應(yīng)用總結(jié) 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08JavaScript高級(jí)程序設(shè)計(jì)閱讀筆記(十六) javascript檢測(cè)瀏覽器和操作系統(tǒng)-detect.js
javascript檢測(cè)瀏覽器和操作系統(tǒng) detect.js使用介紹,需要的朋友可以參考下2012-08-08微信小程序?qū)崿F(xiàn)短信登錄的實(shí)戰(zhàn)
項(xiàng)目要求增加短信登錄及人臉識(shí)別登錄功能,本文就來(lái)實(shí)現(xiàn)一下 短信登錄功能,文中通過(guò)示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10js獲取對(duì)象,數(shù)組所有屬性鍵值(key)和對(duì)應(yīng)值(value)的方法示例
這篇文章主要介紹了js獲取對(duì)象,數(shù)組所有屬性鍵值(key)和對(duì)應(yīng)值(value)的方法,涉及javascript對(duì)于對(duì)象、數(shù)組鍵名與鍵值遍歷相關(guān)操作技巧,需要的朋友可以參考下2019-06-066種JavaScript判斷對(duì)象自身為空的方法小結(jié)
這篇文章主要為大家詳細(xì)介紹了6種JavaScript判斷對(duì)象自身為空的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12前端GET/POST請(qǐng)求下載文件多種方式代碼示例
文件都是通過(guò)接口獲取的,前端通過(guò)調(diào)用接口將接口返回的文件下載,下面這篇文章主要給大家介紹了關(guān)于前端GET/POST請(qǐng)求下載文件的多種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-06-06JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抽獎(jiǎng)器效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10分享9個(gè)最好用的JavaScript開(kāi)發(fā)工具和代碼編輯器
這篇文章主要介紹了9個(gè)最好用的JavaScript開(kāi)發(fā)工具和代碼編輯器,需要的朋友可以參考下2015-03-03