Maison > Article > interface Web > Comment utiliser la zone de saisie du numéro pour limiter le nombre de chiffres saisis et la police change avec la longueur du numéro
Comment utiliser la zone de saisie du numéro pour limiter le nombre de chiffres saisis et la police change avec la longueur du numéro
- 一个新手original
- 2017-09-22 10:07:453799parcourir
Vous devez utiliser des polices de même largeur ici. Par exemple, le chiffre 1 et le chiffre 8 ont la même largeur. Le fichier dinpro-regular.otf est utilisé ici.
Exigences :
1. . Autoriser la saisie d'entiers à 15 chiffres. Deux décimales
2. La largeur de la zone de saisie est fixe et la police change avec la longueur du contenu
3. Il est interdit de saisir plusieurs zéros en commençant. avec 0
ps : le principe ci-dessus est que l'utilisateur saisit un nombre et traite les erreurs non numériques (jugement s'il est vide)
<!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>Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!