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

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

WBOY

Freigeben： 2016-05-16 15:20:04

Original

1197 Leute haben es durchsucht

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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.