實現如圖所示的輸入效果：

實現這種效果，比較簡單的一種方式就是給一個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實現身份證輸入框的輸入效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！