Heim > Artikel > Web-Frontend > jquery beschränkt das Textfeld nur auf die Eingabe von Zahlen (Ganzzahlen und Dezimalzahlen)_jquery

jquery beschränkt das Textfeld nur auf die Eingabe von Zahlen (Ganzzahlen und Dezimalzahlen)_jquery

WBOYOriginal: 2016-05-16 15:21:071087Durchsuche

Das Beispiel in diesem Artikel stellt den detaillierten Code von jquery vor, der das Textfeld nur auf die Eingabe von Zahlen beschränkt. Der spezifische Inhalt ist wie folgt

Hier ist zunächst ein jQuery-Code, der festlegt, dass in das Textfeld nur Zahlen einschließlich Dezimalzahlen eingegeben werden können:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="gb2312"> 
<title>脚本之家</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//文本框只能输入数字(包括小数)，并屏蔽输入法和粘贴 
jQuery.fn.number=function(){
 this.bind("keypress",function(e){ 
 var code=(e.keyCode&#63;e.keyCode:e.which); //兼容火狐 IE 
 //火狐下不能使用退格键 
 if(!$.browser.msie&&(e.keyCode==0x8)){return;} 
 if(this.value.indexOf(".")==-1){return (code >= 48 && code<= 57)||(code==46);}
 else{return code >= 48 && code<= 57} 
 }); 
 this.bind("paste",function(){return false;}); 
 this.bind("keyup",function(){
 if(this.value.slice(0,1) == ".")
 { 
  this.value = ""; 
 } 
 }); 
 this.bind("blur",function(){ 
 if(this.value.slice(-1) == ".")
 { 
  this.value = this.value.slice(0,this.value.length-1); 
 } 
 }); 
}; 
$(function(){ 
 $("#txt").number();
}); 
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

2. Wie jQuery festlegt, dass in das Textfeld nur Ganzzahlen eingegeben werden können: Manchmal kann der Inhalt des Textfelds nur aus Zahlen und nur aus Ganzzahlen bestehen. Für das Alter können Sie beispielsweise nicht „20,8 Jahre alt“ eingeben. Hier ist ein Codebeispiel, um die Implementierung dieser Funktion vorzustellen Helfen Sie Freunden in Not. Der Code lautet wie folgt:

<html> 
<head> 
<meta charset="gb2312"> 
<title>蚂蚁部落</title> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
//文本框只能输入数字(不包括小数)，并屏蔽输入法和粘贴 
jQuery.fn.integer=function(){ 
 this.bind("keypress",function(e){ 
 var code=(e.keyCode&#63;e.keyCode:e.which); //兼容火狐 IE 
 //火狐下不能使用退格键 
 if(!$.browser.msie&&(e.keyCode==0x8))
 { 
  return ; 
 } 
 return code >= 48 && code<= 57; 
 }); 
 this.bind("paste",function(){ 
 return false; 
 }); 
 this.bind("keyup",function(){ 
 if(/(^0+)/.test(this.value)) 
 { 
 this.value = this.value.replace(/^0*/,''); 
 } 
 }); 
}; 
$(function(){ 
 $("#txt").integer();
}); 
</script>
</head>
<body>
<input type="text" id="txt" />
</body>
</html>

Der obige Code entspricht unseren Anforderungen. In das Textfeld können nur ganze Zahlen eingegeben werden.

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die die JQuery-Programmierung erlernen.

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：JavaScript-Nachahmung des Baidu-Eingabefelds fordert automatische Dropdown-Vervollständigung_Javascript-FähigkeitenNächster Artikel：JavaScript-Nachahmung des Baidu-Eingabefelds fordert automatische Dropdown-Vervollständigung_Javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen