基于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-05jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項卡效果
這篇文章主要介紹了jquery插件tytabs.jquery.min.js實(shí)現(xiàn)漸變TAB選項卡效果,實(shí)例分析了tytabs.jquery.min.js插件實(shí)現(xiàn)tab選項卡切換效果的使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08jquery 回調(diào)操作實(shí)例分析【回調(diào)成功與回調(diào)失敗的情況】
這篇文章主要介紹了jquery 回調(diào)操作,結(jié)合實(shí)例形式分析了jQuery回調(diào)成功與回調(diào)失敗的情況及相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2019-09-09jQuery實(shí)現(xiàn)根據(jù)類型自動顯示和隱藏表單
這篇文章主要給大家分享了jQuery實(shí)現(xiàn)根據(jù)類型自動顯示和隱藏表單的代碼,非常的簡單實(shí)用,僅僅10行代碼,推薦給大家,希望能給大家一些提示。2015-03-03jQuery插件jPaginate實(shí)現(xiàn)無刷新分頁
我改了下源碼基本可以在ie7,ie8,ie9正常顯示。以下是部分源碼。發(fā)現(xiàn)用別人的東西出了問題很難搞啊。關(guān)鍵是那個ie啊。2015-05-05JQuery.validate在ie8下不支持的快速解決方法
下面小編就為大家?guī)硪黄狫Query.validate在ie8下不支持的快速解決方法。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考,一起跟隨小編過來看看吧2016-05-05jquery blockUI 遮罩不能消失與不能提交的解決方法
jquery blockUI 遮罩不能消失與不能提交的解決方法,使用jquery blockUI的朋友可以參考下。2011-09-09