如何實現身份證輸入框的輸入效果

阿新 • • 發佈：2019-01-18

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

這裡寫圖片描述

實現這種效果，比較簡單的一種方式就是給一個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。在實現過程中，我發現，雖然輸入可以實現，但是刪除的時候沒有辦法刪除，所以就沒有使用這種方法。

對於這個功能的實現有了解的朋友或者有其他更好的實現方式，歡迎在評論中賜教。

input輸入框輸入小寫字母自動轉換成大寫字母有兩種方法

per put 函數 for 小寫 pre 兩種方法 inpu 小寫字母 html裏input加上 <input type="text" id="txt1" value="" onkeyup="toUpperCase(this)"/> js寫函數 f

專案小結：手機郵箱正則，URL各種判斷返回頁面，input輸入框輸入符合卻獲取不到問題

1.手機郵箱正則近兩年出來很多新號碼，聽說199什麼的都有了- -導致以前的正則不能用了....這就很難過，總是過一段時間出一種新號碼。因此，我決定使用返樸歸真的手機正則。手機正則：var reg=/^1[0-9]\d{9}$/; 郵箱正則：var mailReg = /^[a-zA-Z0-9_.-

input輸入框輸入金額校驗

價格輸入框： <input type="text" id="price" name="price" class="form-control"/> js校驗只能輸入帶兩位小數的金額： $("#price").on('input propertychange',function

怎麼用正則表示式限制輸入框輸入數字的範圍(數字範圍是50-1000),怎麼限制輸入框輸入的數字是以9506開頭的

轉自 https://zhidao.baidu.com/question/1829801257322895700.html <input type="text" onkeyup="var v=this.value||'';v=v.replace(/[^\d]/g,'')

關於js文字輸入框輸入數字進行比較的經驗

今天專案中出了一個bug,讓我來修正. 問題:在一個有24570頁碼的列表頁面,輸入下方跳轉頁碼時出現一個問題,在25-99,246-999,2458-9999之間的頁碼都不能輸入跳轉. 解決: 在Myeclipse中serach了那個跳轉頁面的js語句,沒找到,之後找了好久好久,框

vue-cli中使用百度地圖（根據輸入框輸入的內容，獲取詳細地址）

效果圖如下： 1.申請百度地圖金鑰（ak）-- http://lbsyun.baidu.com/index.php?title=jspopular （1）百度地圖開放平臺–開發文件–web開發–JavaScript API–服務介紹–產品簡介–申請金鑰（ak）（2）

限制輸入框輸入數字

在一些場景下需要對輸入框進行一定的限制，比如輸入框只允許輸入合理的金額 HTML程式碼： <input type="text" id="rechargeAmount" oninput="checkInput(this,10)" autofocus placeholder="請輸入充值金

從一次輸入框無法輸入的 bug，談如何限制輸入框輸入型別

bug的產生和修改上週臨近週末休息的時候，一個同事跑過來了，對我說：“阿倫啊，有一個頁面出問題了，火狐瀏覽器所有的input都沒法輸入了。”我一聽，是不是你給加了什麼屬性，讓input輸入框只讀了啊。看了一下程式碼，很正常的一個輸入框，並且CSS寫的也很正常。

從一次輸入框無法輸入的bug，談如何限制輸入框輸入型別

bug的產生和修改　　上週臨近週末休息的時候，一個同事跑過來了，對我說：“阿倫啊，有一個頁面出問題了，火狐瀏覽器所有的input都沒法輸入了。”我一聽，是不是你給加了什麼屬性，讓input輸入框只讀了啊。看了一下程式碼，很正常的一個輸入框，並且CSS寫的也很正常。 <input id="ipt-me

js統計input/textarea輸入框輸入字數

如果你在實現“統計input、textarea文字框輸入字數”中遇到問題，閱讀本文或許可以幫助你解決這個棘手的問題！手機頁面開發，要統計textareal文字框輸入字數，使用onkeyup雖然可以監聽到輸入框的文字字數變化，但在iphone下有個問題：

移動端輸入框輸入完內容後點擊軟鍵盤上的搜尋按鈕進行搜尋

安卓EditText--輸入框輸入內容設定可見和不可見

輸入框輸入內容設定可見和不可見 1、程式碼中設定編輯框設定內容不可見 edittext.setTransformationMethod(new PasswordTransformationMethod()); 可見： password.setTransformationMe

輸入框輸入模糊查詢匹配/提醒

專案目的：實現一個輸入框輸入之後能夠進行模糊查詢匹配；這樣給輸入者提醒和匹配專案的實現方式：首先檢測輸入框的內容變化，然後ajax請求把資料傳到後臺，通過查詢匹配；最後就是資料的展示；問題難點：查詢後的資料展示，因為這不是一個下拉選擇框，而是一個普通的選擇框；難點解

mui的input輸入框輸入完成鍵盤收起，讓input停留在當前頁面

//input 失去焦點讓其留在當前頁面 $("input").blur(function(){ $(this)[0].scrollIntoView(true); }) //監聽鍵盤

javascript正則怎麼驗證輸入框輸入的資料是否為json型別

通過下面這個函式就可以校驗是否是json型別，返回true是json型別，返回false不是json型別。 function isJsonString(str) { try { JSON.parse(str) return true } catch

禁止輸入框輸入空格

解決js函式replace禁止輸入框輸入非法字元，游標回到文字最後問題(相容ie、谷歌)

/*獲取游標位置*/ function getCursorPos(obj) { var CaretPos = 0; // IE Support if (document.selection) { obj.focus (); //獲取游標位置函式

react native輸入框輸入金額等資料後如何格式化顯示

import React ,{ Component } from 'react'; import {View} from 'react-native'; import { Cells, Cell, CellHeader, CellBody,

多個input輸入框限制每個輸入框輸入一位輸入完成自動獲取下一個input焦點

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="tex

仿支付寶輸入框+輸入鍵盤

1、輸入框。 public class CustomEditor extends View { private Paint linePaint = new Paint(); private Paint pwPaint = new Paint(); // 密碼 pri

如何實現身份證輸入框的輸入效果

相關推薦