recherche

Maison >interface Web >js tutoriel >Basé sur jQuery, la zone de texte ne peut saisir que des nombres (décimaux, entiers)_jquery

Basé sur jQuery, la zone de texte ne peut saisir que des nombres (décimaux, entiers)_jquery

WBOY
WBOYoriginal
2016-05-16 15:20:041217parcourir

Dans les applications réelles, la zone de texte permet parfois uniquement la saisie d'entiers, mais parfois elle peut être plus "fraternelle" et permet la saisie de nombres à virgule flottante. Présentons à travers un exemple de code comment implémenter en utilisant jquery. La zone de texte ne peut saisir que des décimales , le code est le suivant : 

<!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>

Le code ci-dessus répond à nos exigences. Seuls des nombres entiers ou des nombres à virgule flottante peuvent être saisis dans la zone de texte. Le code est relativement simple et je ne le présenterai pas ici.

Ce qui suit explique comment utiliser jquery pour réaliser que la zone de texte ne peut saisir que des entiers :

Parfois, il peut être nécessaire de stipuler que seuls des nombres entiers peuvent être saisis dans le contenu de la zone de texte. Voici un exemple de code qui peut réaliser cette fonction pour référence des amis dans le besoin.

Le code est le suivant :

<!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>

Le code ci-dessus répond aux exigences attendues. Seuls des nombres entiers peuvent être saisis dans la zone de texte. Ce qui suit est une introduction à son processus de mise en œuvre.

Commentaires du code :

1.$(function(){}), lorsque la structure du document est complètement chargée, exécutez le code dans la fonction.
2.$(".NumText").keyup(function(){}), enregistrez la fonction de traitement des événements keyup pour la zone de texte.
3.$(this).val($(this).val().replace(/D|^0/g,'')), utilisez des expressions régulières via la fonction replace() pour remplacer le contenu non numérique par du vide .
4.bind("paste",function(){$(this).val($(this).val().replace(/D|^0/g,''));}), enregistre le traitement des événements de collage Des appels en chaîne vagues, bien sûr, sont utilisés ici, ce qui empêche les utilisateurs de copier et coller à l'aide de ctrl v.

Le code ci-dessus est relativement simple à écrire, et certains points difficiles sont accompagnés de commentaires. Je pense qu'il sera utile à tout le monde.

Déclaration：
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
Article précédent：Explication détaillée du modèle statique d'initialisation AngularJS_AngularJSArticle suivant：Explication détaillée du modèle statique d'initialisation AngularJS_AngularJS

Articles Liés

Voir plus