jQuery input插件是一款非常實用的jQuery插件,它可以幫助開發者快速地實現一些常用的、美觀的輸入框效果。下面我們來通過一些例子來介紹如何使用這個插件。
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/jquery.inputmask/3.3.4/jquery.inputmask.bundle.min.js"></script> <script> // example1 $(document).ready(function() { $('#phone').inputmask('(999) 999-9999'); }); // example2 $(document).ready(function() { $('#date').inputmask('99/99/9999'); }); // example3 $(document).ready(function() { $('#credit-card').inputmask('9999 9999 9999 9999'); }); // example4 $(document).ready(function() { $('#zip-code').inputmask('99999-9999'); }); </script>
上面的例子中我們初始化了4個輸入框,分別代表了電話號碼、日期、信用卡號碼、郵編。對應的初始化代碼分別是:
$('#phone').inputmask('(999) 999-9999'); $('#date').inputmask('99/99/9999'); $('#credit-card').inputmask('9999 9999 9999 9999'); $('#zip-code').inputmask('99999-9999');
使用這個插件非常簡單,只需要引入插件的腳本和jQuery的腳本即可。然后,你只需要對你的輸入框調用inputmask方法,并傳遞一個格式字符串即可。
這個插件還有很多高級的用法,例如輸入框內只允許輸入數字或字母、設置輸入框的最大長度、設置千位分隔符等等。有興趣的開發者可以去查看一下官網的文檔。
下一篇mysql主從同步單表