여기서는 너비가 같은 글꼴을 사용해야 합니다. 예를 들어 숫자 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!