用number輸入框限制輸入數字位數、字體隨數字長度變化方法

來源：懂視網責編：小采時間：2020-11-27 15:28:32

用number輸入框限制輸入數字位數、字體隨數字長度變化方法

用number輸入框限制輸入數字位數、字體隨數字長度變化方法:這里需要使用寬度相同的字體，比如數字1和數字8是等寬的，這里使用的是dinpro-regular.otf需求： 1.允許輸入15位整數，兩位小數 2.輸入框寬度固定，字體隨內容的長度變化 3.禁止輸入多個0開頭 ps: 以上前提是用戶輸入的是數字，非數字報錯處理(判斷是否為空

推薦度：

點擊下載本文 文檔為doc格式

導讀用number輸入框限制輸入數字位數、字體隨數字長度變化方法:這里需要使用寬度相同的字體，比如數字1和數字8是等寬的，這里使用的是dinpro-regular.otf需求： 1.允許輸入15位整數，兩位小數 2.輸入框寬度固定，字體隨內容的長度變化 3.禁止輸入多個0開頭 ps: 以上前提是用戶輸入的是數字，非數字報錯處理(判斷是否為空

這里需要使用寬度相同的字體，比如數字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){//沒有小數點
 //禁止輸入多個0開頭 輸入00變為0 輸入01后變為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);
 } //控制字體大小 14是輸入框剛好可以顯示的數字位數，具體根數實際情況設置
 if($(this).val().length>14){
 $(this).css("font-size",40*(14/$(this).val().length)+"px");
 }else{
 $(this).css("font-size","40px");
 }
 });
 </script>
 </body>
 </html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com