基于jquery實(shí)現(xiàn)的銀行卡號每隔4位自動插入空格的實(shí)現(xiàn)代碼
難點(diǎn)不是插入空格,而是修正光標(biāo)的位置,這個只支持IE9+、chrome瀏覽器
注意:這個使用了jquery框架
核心代碼
$(function() {
$('#kahao').on('keyup', function(e) {
//只對輸入數(shù)字時進(jìn)行處理
if((e.which >= 48 && e.which <= 57) ||
(e.which >= 96 && e.which <= 105 )){
//獲取當(dāng)前光標(biāo)的位置
var caret = this.selectionStart
//獲取當(dāng)前的value
var value = this.value
//從左邊沿到坐標(biāo)之間的空格數(shù)
var sp = (value.slice(0, caret).match(/\s/g) || []).length
//去掉所有空格
var nospace = value.replace(/\s/g, '')
//重新插入空格
var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
//從左邊沿到原坐標(biāo)之間的空格數(shù)
var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
//修正光標(biāo)位置
this.selectionEnd = this.selectionStart = caret + curSp - sp
}
})
})
完整代碼:已經(jīng)測試
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>銀行卡號4位空格</title>
<script src="http://j2.58cdn.com.cn/js/jquery-1.8.3.js"></script>
</head>
<body>
<input type="text" id="kahao" />
<script>
$(function() {
$('#kahao').on('keyup', function(e) {
//只對輸入數(shù)字時進(jìn)行處理
if((e.which >= 48 && e.which <= 57) ||
(e.which >= 96 && e.which <= 105 )){
//獲取當(dāng)前光標(biāo)的位置
var caret = this.selectionStart
//獲取當(dāng)前的value
var value = this.value
//從左邊沿到坐標(biāo)之間的空格數(shù)
var sp = (value.slice(0, caret).match(/\s/g) || []).length
//去掉所有空格
var nospace = value.replace(/\s/g, '')
//重新插入空格
var curVal = this.value = nospace.replace(/(\d{4})/g, "$1 ").trim()
//從左邊沿到原坐標(biāo)之間的空格數(shù)
var curSp = (curVal.slice(0, caret).match(/\s/g) || []).length
//修正光標(biāo)位置
this.selectionEnd = this.selectionStart = caret + curSp - sp
}
})
})
</script>
</body>
</html>
經(jīng)過測試確實(shí)很好用,里面用到了很多的正則
\s 匹配任何空白字符,包括空格、制表符、換頁符等等。等價于[ \f\n\r\t\v]。
關(guān)于正則表達(dá)式的教程可以參考這篇文章:
http://www.dbjr.com.cn/tools/zhengze.html
http://www.dbjr.com.cn/tools/regexsc.htm
相關(guān)文章
JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動效果
這篇文章主要介紹了JQuery插件Marquee.js實(shí)現(xiàn)無縫滾動效果的相關(guān)資料,需要的朋友可以參考下2016-04-04
關(guān)于jquery中attr()和prop()方法的區(qū)別
今兒是腳本之家小編給大家總結(jié)的jquery中attr()和prop()方法的區(qū)別,感興趣的朋友參考下2018-05-05
jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果
這篇文章主要介紹了jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項(xiàng)卡效果,實(shí)例分析了tytabs.jquery.min.js插件實(shí)現(xiàn)tab選項(xiàng)卡切換效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
jquery 回調(diào)操作實(shí)例分析【回調(diào)成功與回調(diào)失敗的情況】
這篇文章主要介紹了jquery 回調(diào)操作,結(jié)合實(shí)例形式分析了jQuery回調(diào)成功與回調(diào)失敗的情況及相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09
jQuery實(shí)現(xiàn)根據(jù)類型自動顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動顯示和隱藏表單的代碼,非常的簡單實(shí)用,僅僅10行代碼,推薦給大家,希望能給大家一些提示。2015-03-03
jQuery插件jPaginate實(shí)現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。2015-05-05
JQuery.validate在ie8下不支持的快速解決方法
下面小編就為大家?guī)硪黄狫Query.validate在ie8下不支持的快速解決方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05
jquery blockUI 遮罩不能消失與不能提交的解決方法
jquery blockUI 遮罩不能消失與不能提交的解決方法,使用jquery blockUI的朋友可以參考下。2011-09-09

