简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

js实现文本框只允许输入数字并限制数字大小的方法_javascript技巧

WBOY
发布： 2016-05-16 15:44:19
原创
1396 人浏览过

本文实例讲述了js实现文本框只允许输入数字并限制数字大小的方法。分享给大家供大家参考。具体如下：

这是一个很个性的输入框特效，规定文本框只允许输入数字，如果你执意要输入其它的字符，则输入的字符将自动消失，除非你输入的是规定内的字符格式，并且对输入数字大小也有限制！为保证兼容性，请使用火狐浏览器。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-input-limit-num-codes/

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>首页</title>
<style type="text/css">
html,body{margin:0; padding:20px;}
</style>
</head>
<body>
<input type="text" id="input" />
<script type="text/javascript">
var text = document.getElementById("input");
text.onkeyup = function(){
this.value=this.value.replace(/\D/g,'');
if(text.value>100){
  text.value = 100;
}
}
</script>
</body>
</html>
登录后复制

希望本文所述对大家的javascript程序设计有所帮助。

相关标签：
js 大小 数字 文本框
来源：php.cn
上一篇：JS实现方向键切换输入框焦点的方法_javascript技巧 下一篇：纯CSS3代码实现滑动开关效果_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
在多个路由中声明的workerpool是否仍然可以保持其cpu使用率而不关心阈值 我希望找到一个带有workerpool的node.js系统来处理CPU密集型任务，但是对于多条路由中的cpu使用情况，我有些困惑。一个场景是这样的：route1.js:constw...
来自于 2024-04-06 19:54:23
0
1
444
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
显示隐藏的侧面板：选中 我希望在侧面板中有一个导航菜单，可以通过动画汉堡菜单切换到视图。我想仅使用CSS创建它，而不使用任何JS。:checked伪类似乎是可行的方法，但我无法让它工作。到目前为止我拥有的...
来自于 2024-04-06 15:49:33
0
1
319
我们是否应该使用 SSG 来部署使用 Nuxt.js 创建的仪表板？ 我们将使用Nuxt.js开发一个供内部使用的仪表板。由于这将是一个内部仪表板，因此不需要通用模式。一般大部分仪表板都是在SPA中开发的。但是SPA还需要服务器将初始HTML和js包...
来自于 2024-04-06 13:17:44
0
1
493
Electron 在预加载时获取 AppData 如何获取预加载的AppData目录？背景.js[...]asyncfunctioncreateWindow(){constwin=newBrowserWindow({width:8...
来自于 2024-04-06 11:05:31
0
1
417
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！