生活随笔
收集整理的這篇文章主要介紹了
number输入框限制输入数字位数、字体随数字长度变化
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
這里需要使用寬度相同的字體，比如數字1和數字8是等寬的，這里使用的是dinpro-regular.otf
需求：
1.允許輸入15位整數，兩位小數
2.輸入框寬度固定，字體隨內容的長度變化
3.禁止輸入多個0開頭
ps: 以上前提是用戶輸入的是數字，非數字報錯處理(判斷是否為空)
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document
</title><style type="text/css">*{margin:0;padding:0;}@font-face{font-family: "dinpro";src: url("font/DINPro-Regular.otf");}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance: none !important;}#aa{width: 300px;height: 50px;font-size: 40px;font-family: "dinpro";}</style>
</head>
<body>
<input type="number" id="aa">
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript">$("#aa").on("input",function(){var value = $(this).val();if(value.indexOf(".")==-1){if( (parseFloat(value)==0 && value.length>1) || (parseFloat(value)!=0 && value.charAt(0)=="0") ){$(this).val(value.substring(1));}if(value.length>15){$(this).val(value.slice(0,15));}}else{$(this).val(Math.floor(value*100)/100);}if($(this).val().length>14){$(this).css("font-size",40*(14/$(this).val().length)+"px");}else{$(this).css("font-size","40px");}});
</script>
</body>
</html>
總結
以上是生活随笔為你收集整理的number输入框限制输入数字位数、字体随数字长度变化的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
