숫자 입력창을 이용하여 입력 자릿수를 제한하는 방법과 숫자 길이에 따라 글꼴이 변경되는 방법-HTML 튜토리얼-php.cn

숫자 입력창을 이용하여 입력 자릿수를 제한하는 방법과 숫자 길이에 따라 글꼴이 변경되는 방법

一个新手

풀어 주다： 2017-09-22 10:07:45

원래의

3852명이 탐색했습니다.

여기서는 너비가 같은 글꼴을 사용해야 합니다. 예를 들어 숫자 1과 숫자 8은 너비가 동일합니다. 여기서는 dinpro-regular.otf를 사용합니다.

요구사항:
1. 소수점 두 개
2. 입력 상자 너비는 고정되어 있으며 내용의 길이에 따라 글꼴이 변경됩니다
3.
ps로 시작하는 0을 여러 개 입력하는 것은 금지됩니다. 위의 전제는 사용자가 숫자를 입력한다는 것입니다. -숫자 오류 처리(비어 있는지 확인)

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

로그인 후 복사

위 내용은 숫자 입력창을 이용하여 입력 자릿수를 제한하는 방법과 숫자 길이에 따라 글꼴이 변경되는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!