How to use the number input box to limit the number of digits entered and the font changes with the length of the number-HTML Tutorial-php.cn

How to use the number input box to limit the number of digits entered and the font changes with the length of the number

一个新手

Release： 2017-09-22 10:07:45

Original

3815 people have browsed it

You need to use fonts with the same width here. For example, the number 1 and the number 8 are of equal width. Here we use dinpro-regular.otf

Requirements:
1. Allow 15-digit integers to be entered. Two decimal places
2. The width of the input box is fixed, and the font changes with the length of the content
3. It is prohibited to input multiple zeros starting with
ps: The above premise is that the user inputs numbers, non-number error processing (judgment Whether it is empty)

<!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>

Copy after login

The above is the detailed content of How to use the number input box to limit the number of digits entered and the font changes with the length of the number. For more information, please follow other related articles on the PHP Chinese website!