明輝手游網(wǎng)中心：是一個免費(fèi)提供流行視頻軟件教程、在線學(xué)習(xí)分享的學(xué)習(xí)平臺！

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

發(fā)表時間：2024-01-03 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

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

需求：
1.允許輸入15位整數(shù)，兩位小數(shù)
2.輸入框?qū)挾裙潭�，字體隨內(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>

以上就是用number輸入框限制輸入數(shù)字位數(shù)、字體隨數(shù)字長度變化方法的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。