文章导航

JavaScript 文本框只能输入数字

2019-1-10 21:07| 作者: admin| 查看: 414| 评论: 0

在很多实际需要中,需要对输入的内容进行限制,比如有些地方只能够输入数字,例如大家经常使用的QQ号码和邮编等,下面就简单介绍一下如何实现此功能。

代码实例如下:

[HTML] 纯文本查看 复制代码
<!DOCTYPE html>   
<html>   
<head>   
<meta charset=" utf-8">   
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<script type="text/javascript"> 
window.onload=function() { 
  var txt=document.getElementById("ant"); 
  txt.onkeyup=function() { 
    txt.value=txt.value.replace(/[^\d]/g,''); 
  } 
  txt.onbeforepaste=function() { 
    clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''));   
  }
    txt.oncontextmenu = function () {
      return false;
    } 
} 
</script> 
</head> 
<body> 
只能够输入数字:<input id="ant" name="ant" /> 
</body> 
</html>

下面介绍一下实现过程。

一.代码注释:

(1).window.onload=function() { },当文档内容完全加载完毕再去执行函数中的代码。

(2).var txt=document.getElementById("ant"),获取文本框对象。

(3).txt.onkeyup=function() {},为文本框注册keyup事件处理函数。

(4).txt.value=txt.value.replace(/[^\d]/g,''),将输入内容的非数字内容替换为空。

(5).txt.oncontextmenu = function () {return false;},防止右键复制黏贴。

二.相关阅读:

(1).document.getElementById()参阅document.getElementById()一章节。

(2).keyup事件参阅JavaScript keyup 事件一章节。

(3).replace()参阅正则表达式 replace()一章节。

(4).contextmenu事件参阅JavaScript contextmenu 事件一章节。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部