Home > Article > Web Front-end > How to use the number input box to limit the number of digits entered and the font changes with the length of the number
How to use the number input box to limit the number of digits entered and the font changes with the length of the number
- 一个新手Original
- 2017-09-22 10:07:453743browse
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>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!