數字每隔四位用空格分隔程式碼例項
分享一段程式碼例項,它實現了數字每隔四位就用空格分隔。
這樣的效果在填寫銀行卡的時候十分常見,這也是非常人性化的舉措。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script> $(document).ready(function () { $('#ant').on('keyup mouseout input', function () { var $this = $(this); var v = $this.val(); /\S{5}/.test(v) && $this.val(v.replace(/\s/g, '').replace(/(.{4})/g, "$1 ")); }); }) </script> </head> <body> <input type="text" id="ant" /> </body> </html>
上面的程式碼實現了我們的要求,更多內容可以參閱相關閱讀。
相關閱讀:
(1).on()可以參閱jquery on()一章節。
(2).keyup事件可以參閱jQuery keyup事件一章節。
(3).val()方法可以參閱jQuery val()一章節。
(4).test()方法可以參閱正規表示式test()函式一章節。
(5).replace()可以參閱正規表示式replace()函式一章節。
(6).子表示式可以參閱正規表示式分組一章節。
相關文章
- js正規表示式實現數字每隔四位用空格分隔程式碼JS
- JavaScript取餘數程式碼例項JavaScript
- JavaScript倒數計時程式碼例項JavaScript
- CSS3文字凹凸效果程式碼例項CSSS3
- dom操作程式碼例項
- css梯形程式碼例項CSS
- CSS3文字陰影效果程式碼例項CSSS3
- 前端學習程式碼例項-JavaScript 生成隨機數前端JavaScript隨機
- 商品搶購倒數計時效果程式碼例項
- 獲取倒數第幾個元素程式碼例項
- 網頁倒數計時跳轉程式碼例項網頁
- 設計模式例項程式碼設計模式
- JavaScript in運算子程式碼例項JavaScript
- table表格美化程式碼例項
- 純css tab選項卡程式碼例項CSS
- jQuery tab選項卡效果程式碼例項jQuery
- 正則實現個位數補零程式碼例項
- C# 中的數字分隔符 _C#
- CSS 隔行變色程式碼例項CSS
- HTML5 拖拽程式碼例項HTML
- JavaScript 阻止事件冒泡程式碼例項JavaScript事件
- [例項分割]Condinst程式碼筆記筆記
- canvas刮刮樂程式碼例項Canvas
- canvas載入效果程式碼例項Canvas
- CSS空心箭頭程式碼例項CSS
- JavaScript運動框架程式碼例項JavaScript框架
- jQuery.map()方法程式碼例項jQuery
- CSS橢圓效果程式碼例項CSS
- CSS條紋背景程式碼例項CSS
- flex居中佈局程式碼例項Flex
- canvas繪製扇形程式碼例項Canvas
- table細線表格例項程式碼
- java水仙花數程式碼,三位四位五位Java
- javascript將字串中的多個空格替換為一個空格的正則例項JavaScript字串
- jquery.idTabs.min.js選項卡程式碼例項jQueryJS
- JS 預編譯程式碼例項分析JS編譯
- 響應式佈局程式碼例項
- JavaScript 表單驗證程式碼例項JavaScript
- 美化滾動條效果程式碼例項