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


Posted in Javascript onAugust 19, 2015

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

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

运行效果截图如下:

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

在线演示地址如下:

具体代码如下:

<!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程序设计有所帮助。

Javascript 相关文章推荐
javascript TextArea动态显示剩余字符
Oct 22 Javascript
JavaScript调用后台的三种方法实例
Oct 17 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
Mar 06 Javascript
浅谈Vue路由快照实现思路及其问题
Jun 07 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
vue项目中引入vue-datepicker插件的详解
May 14 Javascript
vue移动端的左右滑动事件详解
Jun 17 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 Javascript
Express 配置HTML页面访问的实现
Nov 01 Javascript
分享几个JavaScript运算符的使用技巧
Apr 24 Javascript
Jquery基础教程之DOM操作
Aug 19 #Javascript
jquery小火箭返回顶部代码分享
Aug 19 #Javascript
JS简单实现城市二级联动选择插件的方法
Aug 19 #Javascript
js实现当前输入框高亮显示的方法
Aug 19 #Javascript
jQuery实现的仿select功能代码
Aug 19 #Javascript
text-align:justify实现文本两端对齐 兼容IE
Aug 19 #Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
Aug 19 #Javascript
You might like
PHP实现邮件群发的源码
2013/06/18 PHP
php5.3 注意事项说明
2013/07/01 PHP
深入浅析yii2-gii自定义模板的方法
2016/04/26 PHP
yii的入口文件index.php中为什么会有这两句
2016/08/04 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP提取字符串中的手机号正则表达式怎么写
2017/07/17 PHP
jQuery判断元素是否是隐藏的代码
2011/04/24 Javascript
js关于字符长度限制的问题示例探讨
2014/01/24 Javascript
JavaScript模拟实现继承的方法
2015/03/30 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
微信小程序 image组件binderror使用例子与js中的onerror区别
2017/02/15 Javascript
JS动态添加的div点击跳转到另一页面实现代码
2017/09/30 Javascript
Vue状态模式实现窗口停靠功能(灵动、自由, 管理后台Admin界面)
2020/03/06 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
Python中的defaultdict模块和namedtuple模块的简单入门指南
2015/04/01 Python
Python编程中的异常处理教程
2015/08/21 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python实现注册登录系统
2017/08/08 Python
python机器学习之决策树分类详解
2017/12/20 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
python实现微信机器人: 登录微信、消息接收、自动回复功能
2019/04/29 Python
从列表或字典创建Pandas的DataFrame对象的方法
2019/07/06 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
Python logging模块异步线程写日志实现过程解析
2020/06/30 Python
澳大利亚领先的在线机械五金、园艺和存储专家:Edisons
2018/03/24 全球购物
广州喜创信息技术有限公司JAVA软件工程师笔试题
2012/10/17 面试题
自动一体化专业求职信
2014/03/15 职场文书
大学专科自荐信
2014/06/17 职场文书
主要领导对照检查材料
2014/08/26 职场文书
创先争优演讲稿
2014/09/15 职场文书
新郎接新娘保证书
2015/05/08 职场文书
新闻稿怎么写
2015/07/18 职场文书
给校长的建议书作文300字
2015/09/14 职场文书
深入理解MySQL中MVCC与BufferPool缓存机制
2022/05/25 MySQL