Heim >Web-Frontend >HTML-Tutorial >So verwenden Sie das Zahleneingabefeld, um die Anzahl der eingegebenen Ziffern zu begrenzen und die Schriftart ändert sich mit der Länge der Zahl
So verwenden Sie das Zahleneingabefeld, um die Anzahl der eingegebenen Ziffern zu begrenzen und die Schriftart ändert sich mit der Länge der Zahl
- 一个新手Original
- 2017-09-22 10:07:453847Durchsuche
Sie müssen hier Schriftarten mit der gleichen Breite verwenden. Beispielsweise sind die Nummer 1 und die Nummer 8 gleich breit. Die hier verwendete dinpro-regular.otf ist dinpro-regular.otf
Anforderungen:
1. Ermöglicht die Eingabe von 15-stelligen Ganzzahlen
2. Die Breite des Eingabefelds ist festgelegt und die Schriftart ändert sich mit der Länge des Inhalts
3. Die Eingabe ist verboten mehrere Nullen beginnend mit 0
ps: Die obige Voraussetzung ist, dass der Benutzer eine Zahl eingibt, Nicht-Zahlen-Fehlerverarbeitung (Beurteilung) Ob sie leer ist)
<!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>Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Zahleneingabefeld, um die Anzahl der eingegebenen Ziffern zu begrenzen und die Schriftart ändert sich mit der Länge der Zahl. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!