js實現的文字框只能夠輸入數字

admin發表於2017-03-28
JS

不管出於什麼原因，在實際應用會有這樣的需求，那就規定中只能夠輸入陣列，無論是整數還是浮點數。

下面通過程式碼例項介紹一下如何實現此功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function CheckInputIntFloat(oInput){ 
  var reg=/\d{1,}\.{0,1}\d{0,}/;
  if(''!=oInput.value.replace(reg,'')){ 
    oInput.value=oInput.value.match(reg)==null?'':oInput.value.match(reg); 
  } 
}
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.onkeyup=function(){
    CheckInputIntFloat(this);
  }
}
</script>
</head>
<body>
<input id="txt" type="text"/>
</body>
</html>

在上面的程式碼中，使用鍵盤輸入內容完全可以實現篩選功能。

但是上面的程式碼有一個很大的問題，那就是使用滑鼠右鍵複製黏貼的時候驗證就沒有效果了。

程式碼修改如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function CheckInputIntFloat(oInput){ 
  var reg=/\d{1,}\.{0,1}\d{0,}/;
  if(''!=oInput.value.replace(reg,'')){ 
    oInput.value=oInput.value.match(reg)==null?'':oInput.value.match(reg); 
  } 
}
window.onload=function(){
  var otxt=document.getElementById("txt");
  otxt.onfocus=function(){
    document.oncontextmenu=function(){
      return false;
    }
  }
  otxt.onblur=function(){
    document.oncontextmenu=null;
  }
  otxt.onkeyup=function(){
    CheckInputIntFloat(this);
  }
 
}
</script>
</head>
<body>
<input id="txt" type="text"/>
</body>
</html>

上面的程式碼比較狠，當文字框獲取焦點的時候直接禁用右鍵選單，那麼滑鼠右鍵複製就無從下手了。

相關文章