限定文字框只能輸入數字例項程式碼

antzone發表於2017-03-13

有時候文字框中可以輸入的內容只能夠限定為數字，比如郵編和電話號碼等。實現此中效果的方法有多種，比較常用的比如有正規表示式方式，不過這裡我們們不採用這個，下面介紹一下如何通過keyCode屬性值實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>規定文字框只能夠輸入數字-螞蟻部落</title>
<script type="text/javascript"> 
function kp(ev){ 
  var ev=ev||window.event;
  if(ev.keyCode<=47||ev.keyCode>=65){ 
    ev.returnValue=false; 
  } 
} 
function kpd(){ 
  var ev=ev||window.event;
  if(ev.keyCode<=47||(ev.keyCode>=65&&ev.keyCode!=190)){ 
    ev.returnValue=false; 
  } 
} 
window.onload=function(){
  var ofirst=document.getElementById("first");
  var osecond=document.getElementById("second");
   
  ofirst.onkeydown=kp;
  osecond.onkeydown=kpd;
}
</script> 
</head> 
<body> 
只能輸入0-9:<input type="text" id="first" /><br/> 
只能輸入0-9.:<input type="text" id="second" /> 
</body> 
</html>

以上程式碼實現了我們的需要，在第一個文字框中只能夠輸入0-9數字，第二個文字框只能夠輸入0-9和點(.)，下面介紹一下實現過程:

一.實現原理:

為兩個文字框分別註冊onkeydown事件處理函式，此函式中可以通過事件物件的keyCode屬性判斷到底是按下的哪個鍵，如果不在規定的範圍內，那麼就會無效，否則將會將按鍵對應的字元輸入文字框。

二.相關閱讀:

1.ev=ev||window.event可以參閱var ev=window.event||ev的作用是什麼一章節。

2.keyCode屬性可以參閱javascript keyCode一章節。

3.onkeydown事件可以參閱javascript keydown事件一章節。

相關文章