這次距離上一個組件《[js開源組件開發]table表格組件》時隔了一個月,由于最近的項目比較坑,剛挖完坑,所以來總結性提出來幾個組件彌補這次的空缺,首先是金額和數字的千分位和小數點控制的組件,它的作用主要是在輸入框時限制輸入的內容為數字。也可以用于普通標簽的數字格式化,效果如下圖:

源碼github托管地址請點擊https://github.com/tianxiangbing/format-number
<script src="../src/jquery-1.11.2.js"></script> <script src="../src/format-number.js"></script> <div>整數:<input type="text" data-type="int" data-name="int"/></div> <script> var n1 = new FormatNumber(); n1.init({trigger:$('[data-type="int"]'),decimal:0}); </script> <div>整數可為負:<input type="text" data-type="int2" data-name="int"/></div> <script> var n2 = new FormatNumber(); n2.init({trigger:$('[data-type="int2"]'),decimal:0,minus:true}); </script> <div>兩位小數(默認):<input type="text" class="has-minus" value="1112212.221" data-type="number" data-name="as"/></div> <script> var n3 = new FormatNumber(); n3.init({trigger:$('[data-type="number"]')}); </script> <div>3位小數并且可為負數:<input type="text" data-name="pc" data-type="pecent"/></div> <script> var n4 = new FormatNumber(); n4.init({trigger:$('[data-type="pecent"]'),decimal:3,minus:true}); </script> <div>4位小數并且不可為負數:<input type="text" data-name="pc" data-type="pecent2"/></div> <script> var n5 = new FormatNumber(); n5.init({trigger:$('[data-type="pecent2"]'),decimal:4}); </script> <div>標簽:123123123.13211=<span id="sp_number">123123123.13211</span></div> <script> $('#sp_number').FormatNumber({decimal:4}) </script>
觸發器元素,可為input或標簽元素(span/div)
委托對象,由于本插件對事件的綁定都以委托為主,如不傳,默認代理到body上
小數位數,默認2位
是否支持負數,默認為false不支持
新聞熱點
疑難解答