ホームページ > 記事 > ウェブフロントエンド > 数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法
数値入力ボックスを使用して入力桁数を制限し、数値の長さに応じてフォントを変更する方法
- 一个新手オリジナル
- 2017-09-22 10:07:453811ブラウズ
ここでは同じ幅のフォントを使用する必要があります。たとえば、数字の 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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：HTTPステータスコードの概要次の記事：HTTPステータスコードの概要