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 相关文章推荐
JS JavaScript获取Url参数,src属性参数
Mar 09 Javascript
建立良好体验度的Web注册系统ajax
Jul 09 Javascript
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
javascript中的nextSibling使用陷(da)阱(keng)
May 05 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 Javascript
JS+CSS实现六级网站导航主菜单效果
Sep 28 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
Jan 10 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
Jul 10 Javascript
js 公式编辑器 - 自定义匹配规则 - 带提示下拉框 - 动态获取光标像素坐标
Jan 04 Javascript
基于JS实现一个随机生成验证码功能
May 29 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程序61条面向对象分析设计的经验小结
2008/11/12 PHP
基于xcache的配置与使用详解
2013/06/18 PHP
php根据生日计算年龄的方法
2015/07/13 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
PHP调用其他文件中的类
2018/04/02 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
php中钩子(hook)的原理与简单应用demo示例
2019/09/03 PHP
jquery下实现overlay遮罩层代码
2010/08/25 Javascript
使用jquery动态加载Js文件和Css文件
2015/10/24 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
总结十个Angular.js由浅入深的面试问题
2016/08/26 Javascript
AngularJs  E2E Testing 详解
2016/09/02 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
浅谈Node.js:fs文件系统模块
2016/12/08 Javascript
Javascript的this用法
2017/01/16 Javascript
JavaScript实现打印星型金字塔功能实例分析
2017/09/27 Javascript
原生JS与jQuery编写简单选项卡
2017/10/30 jQuery
解决vue中使用swiper插件问题及swiper在vue中的用法
2018/04/04 Javascript
vue+node实现图片上传及预览的示例方法
2018/11/22 Javascript
微信小程序实现swiper切换卡内嵌滚动条不显示的方法示例
2018/12/20 Javascript
深入学习JavaScript 高阶函数
2019/06/11 Javascript
ES6 Object.assign()的用法及其使用
2020/01/18 Javascript
如何在vue中使用jointjs过程解析
2020/05/29 Javascript
Python排序算法之选择排序定义与用法示例
2018/04/29 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
Python如何使用paramiko模块连接linux
2020/03/18 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
Python操作word文档插入图片和表格的实例演示
2020/10/25 Python
python 爬取小说并下载的示例
2020/12/07 Python
阿联酋电子产品购物网站:Menakart
2017/09/15 全球购物
施华洛世奇日本官网:SWAROVSKI日本
2018/05/04 全球购物
意大利珠宝店:Luxury Zone
2019/01/05 全球购物
物流仓管员工作职责
2014/01/06 职场文书
街道党工委党的群众路线教育实践活动对照检查材料思想汇报
2014/10/05 职场文书
书法社团活动总结
2015/05/07 职场文书
vue动态绑定style样式
2022/04/20 Vue.js