Heim > Artikel > Web-Frontend > Basierend auf jQuery kann das Textfeld nur Zahlen (Dezimalzahlen, Ganzzahlen)_jquery eingeben

Basierend auf jQuery kann das Textfeld nur Zahlen (Dezimalzahlen, Ganzzahlen)_jquery eingeben

WBOYOriginal: 2016-05-16 15:20:041158Durchsuche

In tatsächlichen Anwendungen ermöglicht das Textfeld manchmal nur die Eingabe von Ganzzahlen, manchmal ist es jedoch möglicherweise „brüderlicher“ und ermöglicht die Eingabe von Gleitkommazahlen. Lassen Sie uns anhand von Beispielcode vorstellen, wie mit jquery implementiert wird. In das Textfeld können nur Dezimalzahlen eingegeben werden , der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
}).bind("paste",function(){ 
$(this).val($(this).val().replace(/[^0-9.]/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

Der obige Code entspricht unseren Anforderungen. In das Textfeld können nur Ganzzahlen oder Gleitkommazahlen eingegeben werden. Der Code ist relativ einfach und ich werde ihn hier nicht vorstellen.

Im Folgenden wird erläutert, wie Sie mit jquery erkennen, dass in das Textfeld nur Ganzzahlen eingegeben werden können:

Manchmal kann es notwendig sein, festzulegen, dass nur ganze Zahlen in den Inhalt des Textfelds eingegeben werden können. Hier ist ein Codebeispiel, das diese Funktion als Referenz für Freunde in Not realisieren kann.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.jb51.net" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(function(){ 
$(".NumText").keyup(function(){ 
$(this).val($(this).val().replace(/\D|^0/g,'')); 
}).bind("paste",function(){
$(this).val($(this).val().replace(/\D|^0/g,'')); 
})
}); 
</script>
</head>
<body>
<input type="text" class="NumText"/>
</body>
</html>

Der obige Code erfüllt die erwarteten Anforderungen. In das Textfeld können nur Ganzzahlen eingegeben werden. Das Folgende ist eine Einführung in den Implementierungsprozess.

Codekommentare:

1.$(function(){}), wenn die Dokumentstruktur vollständig geladen ist, führen Sie den Code in der Funktion aus.
2.$(".NumText").keyup(function(){}), registrieren Sie die Keyup-Ereignisverarbeitungsfunktion für das Textfeld.
3.$(this).val($(this).val().replace(/D|^0/g,'')), verwenden Sie reguläre Ausdrücke über die Funktion replace(), um nicht numerischen Inhalt durch leeren zu ersetzen .
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));}), registrieren Sie die Verarbeitung von Einfügeereignissen Vage, natürlich werden hier Kettenaufrufe verwendet, die Benutzer daran hindern, mit Strg V zu kopieren und einzufügen.

Der obige Code ist relativ einfach zu schreiben und einige schwierige Punkte sind mit Kommentaren versehen. Ich glaube, dass er für alle hilfreich sein wird.

Stellungnahme：

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

Vorheriger Artikel：Detaillierte Erläuterung der statischen Vorlage_AngularJS für die AngularJS-InitialisierungNächster Artikel：Detaillierte Erläuterung der statischen Vorlage_AngularJS für die AngularJS-Initialisierung

In Verbindung stehende Artikel

Mehr sehen