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

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

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

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

推薦度：

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

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

這里需要使用寬度相同的字體，比如數(shù)字1和數(shù)字8是等寬的，這里使用的是dinpro-regular.otf

需求：
1.允許輸入15位整數(shù)，兩位小數(shù)
2.輸入框?qū)挾裙潭ǎ煮w隨內(nèi)容的長度變化
3.禁止輸入多個0開頭
ps: 以上前提是用戶輸入的是數(shù)字，非數(shù)字報錯處理(判斷是否為空)

<!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){//沒有小數(shù)點
 //禁止輸入多個0開頭 輸入00變?yōu)? 輸入01后變?yōu)?
 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{//有小數(shù)點
 //取兩位小數(shù)
 $(this).val(Math.floor(value*100)/100);
 } //控制字體大小 14是輸入框剛好可以顯示的數(shù)字位數(shù)，具體根數(shù)實際情況設(shè)置
 if($(this).val().length>14){
 $(this).css("font-size",40*(14/$(this).val().length)+"px");
 }else{
 $(this).css("font-size","40px");
 }
 });
 </script>
 </body>
 </html>

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