Maison interface Web tutoriel HTML 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

Sep 22, 2017 am 10:07 AM
数字 输入

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>
Copier après la connexion

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!

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
4 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Comment déverrouiller tout dans Myrise
1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Désactivation du guide d'expérience d'entrée Win11 Désactivation du guide d'expérience d'entrée Win11 Dec 27, 2023 am 11:07 AM

Récemment, de nombreux utilisateurs de Win11 ont rencontré le problème selon lequel la boîte de dialogue d'expérience de saisie scintille toujours et ne peut pas être désactivée. Cela est en fait dû aux services système et aux composants par défaut de Win11. Nous devons d'abord désactiver les services concernés, puis désactiver ceux-ci. service d’expérience de saisie. Résolu, essayons-le ensemble. Comment désactiver l'expérience de saisie dans Win11 : Première étape, cliquez avec le bouton droit sur le menu Démarrer et ouvrez « Gestionnaire des tâches ». Deuxième étape, recherchez les trois processus « CTF Loader », « MicrosoftIME » et « Service Host : Textinput Management Service ». dans l'ordre, faites un clic droit sur "Fin de tâche" "La troisième étape, ouvrez le menu Démarrer, recherchez et ouvrez "Services" en haut. La quatrième étape, recherchez "Textinp" dedans

L'entrée Windows rencontre un blocage ou une utilisation élevée de la mémoire [Réparer] L'entrée Windows rencontre un blocage ou une utilisation élevée de la mémoire [Réparer] Feb 19, 2024 pm 10:48 PM

L'expérience de saisie Windows est un service système clé chargé de traiter les entrées utilisateur provenant de divers périphériques d'interface humaine. Il démarre automatiquement au démarrage du système et s'exécute en arrière-plan. Cependant, ce service peut parfois se bloquer automatiquement ou occuper trop de mémoire, ce qui entraîne une réduction des performances du système. Il est donc crucial de surveiller et de gérer ce processus en temps opportun pour garantir l’efficacité et la stabilité du système. Dans cet article, nous expliquerons comment résoudre les problèmes de blocage de l'expérience de saisie Windows ou entraînant une utilisation élevée de la mémoire. Le service Windows Input Experience n'a pas d'interface utilisateur, mais il est étroitement lié à la gestion des tâches système de base et des fonctions liées aux périphériques d'entrée. Son rôle est d'aider le système Windows à comprendre chaque entrée saisie par l'utilisateur.

iOS 17 : Comment changer le style d'horloge de l'iPhone en mode veille iOS 17 : Comment changer le style d'horloge de l'iPhone en mode veille Sep 10, 2023 pm 09:21 PM

La veille est un mode d'écran de verrouillage qui s'active lorsque l'iPhone est branché sur le chargeur et orienté en orientation horizontale (ou paysage). Il se compose de trois écrans différents, dont l'un affiche l'heure en plein écran. Lisez la suite pour savoir comment changer le style de votre horloge. Le troisième écran de StandBy affiche les heures et les dates dans différents thèmes que vous pouvez faire glisser verticalement. Certains thèmes affichent également des informations supplémentaires, comme la température ou la prochaine alarme. Si vous maintenez une horloge enfoncée, vous pouvez basculer entre différents thèmes, notamment numérique, analogique, mondial, solaire et flottant. Float affiche l'heure dans de grands nombres de bulles dans des couleurs personnalisables, Solar a une police plus standard avec un motif d'éruption solaire dans différentes couleurs et World affiche le monde en mettant en surbrillance

Générer des nombres et des chaînes aléatoires en JavaScript Générer des nombres et des chaînes aléatoires en JavaScript Sep 02, 2023 am 08:57 AM

La possibilité de générer des nombres aléatoires ou des chaînes alphanumériques s'avère utile dans de nombreuses situations. Vous pouvez l'utiliser pour faire apparaître des ennemis ou de la nourriture à différents endroits du jeu. Vous pouvez également l'utiliser pour suggérer des mots de passe aléatoires aux utilisateurs ou créer des noms de fichiers pour enregistrer des fichiers. J'ai écrit un tutoriel sur la façon de générer des chaînes alphanumériques aléatoires en PHP. J'ai dit au début de cet article que peu d'événements sont véritablement aléatoires, et il en va de même pour la génération de nombres aléatoires ou de chaînes. Dans ce tutoriel, je vais vous montrer comment générer une chaîne alphanumérique pseudo-aléatoire en JavaScript. Générer des nombres aléatoires en JavaScript Commençons par générer des nombres aléatoires. La première méthode qui me vient à l’esprit est Math.random(), qui renvoie un float

Programme C++ pour arrondir un nombre à n décimales Programme C++ pour arrondir un nombre à n décimales Sep 12, 2023 pm 05:13 PM

Représenter des nombres en sortie est une tâche intéressante et importante lors de l’écriture d’un programme dans n’importe quel langage. Pour les types entiers (données de type court, long ou moyen), il est facile de représenter des nombres en sortie. Pour les nombres à virgule flottante (de type flottant ou double), nous devons parfois les arrondir à un nombre spécifique de décimales. Par exemple, si nous voulons représenter 52,24568 sous forme de trois décimales, un prétraitement est nécessaire. Dans cet article, nous présenterons plusieurs techniques pour représenter les nombres à virgule flottante avec un nombre spécifique de décimales par arrondi. Parmi les différentes approches, il est important d'utiliser une chaîne de format de type C, d'utiliser l'argument de précision et d'utiliser la fonction round() de la bibliothèque mathématique. Regardons-les un par un. avec

Utilisez C++ pour écrire du code afin de trouver le Nième nombre non carré Utilisez C++ pour écrire du code afin de trouver le Nième nombre non carré Aug 30, 2023 pm 10:41 PM

Nous connaissons tous des nombres qui ne sont le carré d’aucun nombre, comme 2, 3, 5, 7, 8, etc. Il existe N nombres non carrés et il est impossible de connaître tous les nombres. Ainsi, dans cet article, nous expliquerons tout sur les nombres sans carrés ou non carrés et les moyens de trouver le Nième nombre non carré en C++. Nième nombre non carré Si un nombre est le carré d'un entier, alors ce nombre est appelé un carré parfait. Quelques exemples de nombres carrés parfaits sont -1iscarréde14iscarréde29iscarréde316iscarréde425iscarréde5 Si un nombre n'est le carré d'aucun entier, alors le nombre est appelé non carré. Par exemple, les 15 premiers nombres non carrés sont -2,3,5,6,

Nombres en Java (avec préfixe 0 et chaînes) Nombres en Java (avec préfixe 0 et chaînes) Aug 29, 2023 pm 01:45 PM

Nombres en Java Il est important de comprendre que la classe nombre n'est pas une classe tangible mais une classe abstraite. À l’intérieur, nous avons un ensemble de classes wrapper qui définissent ses fonctionnalités. Ces classes wrapper incluent Integer, Byte, Double, Short, Float et Long. Vous remarquerez peut-être qu'il s'agit des mêmes types de données de base dont nous avons parlé plus tôt, mais ils sont représentés comme des classes distinctes avec des noms en majuscules pour se conformer à la convention de dénomination des classes. Le compilateur convertit automatiquement les types de données primitifs en objets et vice versa selon les besoins d'une fonction ou d'une portée de programme particulière, et les classes numériques font partie du package java.lang. Ce processus est appelé autoboxing et unboxing. En saisissant la nature abstraite des classes numériques et de leurs classes wrapper correspondantes, nous pouvons

Rechercher des nombres qui ne sont divisibles par aucun nombre dans une plage, à l'aide de C++ Rechercher des nombres qui ne sont divisibles par aucun nombre dans une plage, à l'aide de C++ Sep 13, 2023 pm 09:21 PM

Dans cet article, nous aborderons le problème de la recherche de nombres compris entre 1 et n (donnés) qui ne sont divisibles par aucun nombre compris entre 2 et 10. Comprenons cela avec quelques exemples - Entrée : num = 14 Sortie : 3 Explication : Il y a trois nombres, 1, 11 et 13, qui ne sont pas divisibles. Entrée : num = 21 Sortie : 5 Explication : Il y a cinq nombres 1, 11, 13, 17 et 19, qui ne sont pas divisibles. Méthode simple résolue si.

See all articles