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

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

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>
Nach dem Login kopieren

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!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Deaktivieren des Win11 Input Experience Guide Deaktivieren des Win11 Input Experience Guide Dec 27, 2023 am 11:07 AM

In letzter Zeit sind viele Win11-Benutzer auf das Problem gestoßen, dass das Eingabedialogfeld immer flackert und nicht ausgeschaltet werden kann. Dies wird tatsächlich durch die Standardsystemdienste und -komponenten von Win11 verursacht. Wir müssen zuerst die relevanten Dienste deaktivieren Input Experience Service gelöst, versuchen wir es gemeinsam. So deaktivieren Sie das Eingabeerlebnis in Win11: Klicken Sie im ersten Schritt mit der rechten Maustaste auf das Startmenü und öffnen Sie den „Task-Manager“. Suchen Sie im zweiten Schritt die drei Prozesse „CTF Loader“, „MicrosoftIME“ und „Service Host: Textinput Management Service“. Klicken Sie in der Reihenfolge mit der rechten Maustaste auf „Aufgabe beenden“. Im dritten Schritt öffnen Sie das Startmenü, suchen und öffnen „Dienste“ oben. Suchen Sie im vierten Schritt darin nach „Textinp“.

Bei Windows-Eingaben kommt es zu Hängenbleiben oder hoher Speicherauslastung [Fix] Bei Windows-Eingaben kommt es zu Hängenbleiben oder hoher Speicherauslastung [Fix] Feb 19, 2024 pm 10:48 PM

Die Windows-Eingabeerfahrung ist ein wichtiger Systemdienst, der für die Verarbeitung von Benutzereingaben von verschiedenen Geräten mit menschlicher Schnittstelle verantwortlich ist. Es startet automatisch beim Systemstart und läuft im Hintergrund. Allerdings kann es manchmal vorkommen, dass dieser Dienst automatisch hängt oder zu viel Speicher belegt, was zu einer verringerten Systemleistung führt. Daher ist es wichtig, diesen Prozess rechtzeitig zu überwachen und zu verwalten, um die Systemeffizienz und -stabilität sicherzustellen. In diesem Artikel erfahren Sie, wie Sie Probleme beheben können, bei denen die Windows-Eingabe einfriert oder eine hohe Speicherauslastung verursacht. Der Windows Input Experience Service verfügt über keine Benutzeroberfläche, ist jedoch eng mit der Handhabung grundlegender Systemaufgaben und Funktionen im Zusammenhang mit Eingabegeräten verbunden. Seine Aufgabe besteht darin, dem Windows-System dabei zu helfen, jede vom Benutzer eingegebene Eingabe zu verstehen.

iOS 17: So ändern Sie den Uhrstil des iPhone im Standby-Modus iOS 17: So ändern Sie den Uhrstil des iPhone im Standby-Modus Sep 10, 2023 pm 09:21 PM

Standby ist ein Sperrbildschirmmodus, der aktiviert wird, wenn das iPhone an das Ladegerät angeschlossen und horizontal (oder im Querformat) ausgerichtet ist. Es besteht aus drei verschiedenen Bildschirmen, von denen einer im Vollbildmodus angezeigt wird. Lesen Sie weiter, um zu erfahren, wie Sie den Stil Ihrer Uhr ändern können. Auf dem dritten Bildschirm von StandBy werden Uhrzeiten und Daten in verschiedenen Themen angezeigt, die Sie vertikal wischen können. Einige Themes zeigen auch zusätzliche Informationen an, wie z. B. Temperatur oder nächster Alarm. Wenn Sie eine beliebige Uhr gedrückt halten, können Sie zwischen verschiedenen Themen wechseln, darunter Digital, Analog, Welt, Solar und Floating. Float zeigt die Zeit in großen Blasenzahlen in anpassbaren Farben an, Solar verfügt über eine Standardschriftart mit einem Sonneneruptionsdesign in verschiedenen Farben und World zeigt die Welt durch Hervorhebung an

Generieren Sie Zufallszahlen und Zeichenfolgen in JavaScript Generieren Sie Zufallszahlen und Zeichenfolgen in JavaScript Sep 02, 2023 am 08:57 AM

Die Möglichkeit, Zufallszahlen oder alphanumerische Zeichenfolgen zu generieren, ist in vielen Situationen praktisch. Sie können damit an verschiedenen Orten im Spiel Feinde oder Nahrung hervorbringen. Sie können es auch verwenden, um Benutzern zufällige Passwörter vorzuschlagen oder Dateinamen zum Speichern von Dateien zu erstellen. Ich habe ein Tutorial darüber geschrieben, wie man in PHP zufällige alphanumerische Zeichenfolgen generiert. Ich habe am Anfang dieses Beitrags gesagt, dass nur wenige Ereignisse wirklich zufällig sind, und das Gleiche gilt für die Zufallszahlen- oder String-Generierung. In diesem Tutorial zeige ich Ihnen, wie Sie in JavaScript eine pseudozufällige alphanumerische Zeichenfolge generieren. Generieren von Zufallszahlen in JavaScript Beginnen wir mit der Generierung von Zufallszahlen. Die erste Methode, die mir in den Sinn kommt, ist Math.random(), die einen Float zurückgibt

C++-Programm zum Runden einer Zahl auf n Dezimalstellen C++-Programm zum Runden einer Zahl auf n Dezimalstellen Sep 12, 2023 pm 05:13 PM

Zahlen als Ausgabe darzustellen ist eine interessante und wichtige Aufgabe beim Schreiben eines Programms in einer beliebigen Sprache. Bei ganzzahligen Typen (Daten vom Typ kurz, lang oder mittel) ist es einfach, Zahlen als Ausgabe darzustellen. Bei Gleitkommazahlen (Float- oder Double-Typ) müssen wir sie manchmal auf eine bestimmte Anzahl von Dezimalstellen runden. Wenn wir beispielsweise 52,24568 mit drei Dezimalstellen darstellen möchten, ist eine gewisse Vorverarbeitung erforderlich. In diesem Artikel stellen wir verschiedene Techniken vor, um Gleitkommazahlen durch Runden auf eine bestimmte Anzahl von Dezimalstellen darzustellen. Unter den verschiedenen Ansätzen ist es wichtig, eine C-ähnliche Formatzeichenfolge zu verwenden, das Präzisionsargument zu verwenden und die Funktion „round()“ aus der Mathematikbibliothek zu verwenden. Schauen wir sie uns einzeln an. mit

Verwenden Sie C++, um Code zu schreiben, um die N-te nichtquadratische Zahl zu finden Verwenden Sie C++, um Code zu schreiben, um die N-te nichtquadratische Zahl zu finden Aug 30, 2023 pm 10:41 PM

Wir alle kennen Zahlen, die nicht das Quadrat einer Zahl sind, wie zum Beispiel 2, 3, 5, 7, 8 usw. Es gibt N nichtquadratische Zahlen und es ist unmöglich, jede Zahl zu kennen. In diesem Artikel erklären wir alles über quadratlose oder nichtquadratische Zahlen und Möglichkeiten, die N-te nichtquadratische Zahl in C++ zu finden. N-te nichtquadratische Zahl Wenn eine Zahl das Quadrat einer ganzen Zahl ist, wird die Zahl als perfektes Quadrat bezeichnet. Einige Beispiele für perfekte Quadratzahlen sind -1isquadratvon14isquadratvon29isquadratvon316isquadratvon425isquadratvon5. Wenn eine Zahl nicht das Quadrat einer ganzen Zahl ist, wird die Zahl als nichtquadratisch bezeichnet. Die ersten 15 nichtquadratischen Zahlen sind beispielsweise -2,3,5,6,

Zahlen in Java (mit 0-Präfix und Zeichenfolgen) Zahlen in Java (mit 0-Präfix und Zeichenfolgen) Aug 29, 2023 pm 01:45 PM

Zahlen in Java Es ist wichtig zu verstehen, dass die Zahlenklasse keine greifbare Klasse, sondern eine abstrakte Klasse ist. Darin befindet sich eine Reihe von Wrapper-Klassen, die seine Funktionalität definieren. Zu diesen Wrapper-Klassen gehören Integer, Byte, Double, Short, Float und Long. Möglicherweise stellen Sie fest, dass es sich dabei um dieselben grundlegenden Datentypen handelt, die wir zuvor besprochen haben, sie werden jedoch als separate Klassen mit Großbuchstaben dargestellt, um der Klassenbenennungskonvention zu entsprechen. Der Compiler konvertiert automatisch primitive Datentypen in Objekte und umgekehrt, je nach Bedarf für eine bestimmte Funktion oder einen bestimmten Programmumfang. Numerische Klassen sind Teil des java.lang-Pakets. Dieser Vorgang wird Autoboxing und Unboxing genannt. Indem wir die abstrakte Natur numerischer Klassen und ihrer entsprechenden Wrapper-Klassen verstehen, können wir dies tun

Finden Sie mit C++ Zahlen, die durch keine Zahl in einem Bereich teilbar sind Finden Sie mit C++ Zahlen, die durch keine Zahl in einem Bereich teilbar sind Sep 13, 2023 pm 09:21 PM

In diesem Artikel werden wir das Problem diskutieren, Zahlen zwischen 1 und n (vorgegeben) zu finden, die nicht durch eine Zahl zwischen 2 und 10 teilbar sind. Lassen Sie uns dies anhand einiger Beispiele verstehen: Eingabe: Nummer = 14 Ausgabe: 3 Erläuterung: Es gibt drei Zahlen, 1, 11 und 13, die nicht teilbar sind. Eingabe: Nummer = 21 Ausgabe: 5 Erläuterung: Es gibt fünf Zahlen 1, 11, 13, 17 und 19, die nicht teilbar sind

See all articles