Javascript – Đã bao giờ bạn có ý nghĩ muốn làm cho trải nghiệm người dùng được tốt hơn chưa? Ví dụ như nhập vào số lớn hơn một nghìn thì tự động thêm dấu phẩy vào đó. Hôm nay mình sẽ hướng dẫn các bạn làm điều đó
Ở bài viết này mình sẽ tận dụng 1 Plugin sẵn có của trên mạng đó là Jquery Input Mask
I. Các bước cần chuẩn bị:
- Bộ thư viện Javascript Jquery Input Mask
- Tự viết 1 file Javascript Extend thư viện này để dễ dàng làm việc với nó hơn
II: Bắt đầu công việc:
Các bạn tải bộ Jquery Input Mask về tại đây
https://github.com/RobinHerbots/jquery.inputmask
Sau khi download về các bạn sẽ có được 3 Files
inputmask.js jquery.inputmask.js inputmask.numeric.extensions.js
Sau đó mình sẽ viết 1 File Script Extend bộ thư viện này để tiện cho việc sử dụng hơn. Mình đặt tên là TPlugin
/*
This plugin base-on Jquery Input Mask
Before using this Plugin make sure that you included 3 script before this script
1. inputmask.js
2. jquery.inputmask.js
3. inputmask.numeric.extensions.js
*/
(function ($) {
$.fn.extend({
moneyMask: function (maxlength) {
return this.inputmask('decimal', {
radixPoint: ".", digits: 2, integerDigits: maxlength, allowMinus: true,
autoGroup: true,
'autoUnmask' : true,
groupSeparator: ",",
groupSize: 3,
skipRadixDance: true
});
}
});
})(jQuery);
Sử dụng
Add 4 file Javascript vào Header
<script src="js/InputMask/inputmask.js"></script> <script src="js/InputMask/jquery.inputmask.js"></script> <script src="js/InputMask/inputmask.numeric.extensions.js"></script> <script src="js/TPlugin/TPlugin.js"></script>
Sử dụng function mà mình vừa viết ra
<html>
<head>
<script src="js/InputMask/inputmask.js"></script>
<script src="js/InputMask/jquery.inputmask.js"></script>
<script src="js/InputMask/inputmask.numeric.extensions.js"></script>
<script src="js/TPlugin/TPlugin.js"></script>
<script>
$(document).ready(function(){
$(".ProdPrice").moneyMask(10);
});
</script>
</head>
<body>
Giá sản phẩm: <input type="text" class="ProdPrice">
<br/>
<a href="vnstart.net" target="_blank">Học lập trình Javascript với VNStart.net</a>
</body>
</html>
Để sử dụng được Plugin các bạn phải đặt nó trong khối
$(document).ready(function(){
$(".ProdPrice").moneyMask(10);
});
Từ khóa “.ProdPrice” chính là class của mình.
Đoạn code .moneyMask(10) chính là function mình vừa viết extend ra. Tối đa 10 ký tự và cho phép 2 số thập phân. Các bạn chạy thử và xem kết quả nhé. Các bạn cũng có thể custom các kiểu dữ liệu khác cho mình nhé. Hãy để lại comment đóng góp 🙂
Have nice day!
