Programming, Network, Office, Hardware, Software, Design, Photography.. I am just a GEEK
Related Articles
Một trong những yêu cầu khi thiết kế website đó là phải tạo sự tiện lợi cho người sử dụng. Input Mask được xem là giải pháp giúp hiển thị nội dung đẹp hơn trong form nhập vào.
Đã có nhiều thư viện Jquery hỗ trợ chúng ta, nhưng hôm nay Ngô Tôn sẽ hướng dẫn các bạn một số hàm cơ bản và thông dụng.
Ta sẽ áp dụng hàm replace trong Jquery.
Format số
|
1 |
.replace(/[^0-9-.]/g, "") |
|
1 |
.replace(/[^0-9]/g, "") |
Format số điện thoại
|
1 2 |
.replace(/[^0-9]/g, "") .replace(/(\d{3})(\d{3})(\d{4})/, "$1 $2 $3") |
VD: Input: 0902085911 -> Output: 090 208 5911
Format tiền tệ
|
1 2 |
.replace(/[^0-9]/g, "") .replace(/\B(?=(\d{3})+(?!\d))/g, ",") |
Format số hóa đơn
Trong hàm này mình sẽ sử dụng 1 cách hơi khác, có thể xem là cách thủ công.
|
1 2 3 4 5 6 7 |
var val = $(this).val(); $(this).val(val.substring(1, val.length)); var val_new = $(this).val(); if (val_new.length<7) { $(this).val("0"+val_new); } |
Vì số hóa đơn luôn có 7 số và có số tăng dần.
VD: Input: 538 -> Output: 0000538
Ta áp dụng các hàm trên vào Input với hàm keyup().
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<input type="text" id="mask" /> <script type="text/javascript"> $('#mask').keyup(function(event) { // skip for arrow keys if(event.which >= 37 && event.which <= 40) return; // format number $(this).val(function(index, value) { return value .replace(/[^0-9]/g, "") .replace(/(\d{3})(\d{3})(\d{4})/, "$1 $2 $3") ; }); }); $('#mask').keyup(function(event) { // skip for arrow keys if(event.which >= 37 && event.which <= 40) return; // format number $(this).val(function(index, value) { return value .replace(/[^0-9-.]/g, "") .replace(/\B(?=(\d{3})+(?!\d))/g, ",") ; }); }); $('#mask').keyup(function(){ var val = $(this).val(); $(this).val(val.substring(1, val.length)); var val_new = $(this).val(); if (val_new.length<7) { $(this).val("0"+val_new); } }); </script> |
Buy me a coffee
Leave a Reply