ホームページ >ウェブフロントエンド >htmlチュートリアル >数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法
ここでは同じ幅のフォントを使用する必要があります。たとえば、数字の 1 と数字 8 は同じ幅です。ここでは dinpro-regulator.otf が使用されます。
要件: 1. 15 桁の整数の入力を許可します。小数点以下 2 桁
2. 入力ボックスの幅は固定されており、フォントはコンテンツの長さに応じて変化します
3.
で始まる複数のゼロを入力することは禁止されています。 -number エラー処理(空かどうか判定)
<!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 中国語 Web サイトの他の関連記事を参照してください。