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 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
Jquery 实现grid绑定模板
Jan 28 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
JSON 数据格式详解
Sep 13 Javascript
js 只比较时间大小的实例
Oct 26 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
layui实现table加载的示例代码
Aug 14 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
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
php遍历目录viewDir函数
2009/12/15 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
extJs 下拉框联动实现代码
2010/04/09 Javascript
js 中 document.createEvent的用法
2010/08/29 Javascript
jquery $.getJSON()跨域请求
2011/12/21 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
node.js中的fs.readlink方法使用说明
2014/12/17 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
JavaScript图片轮播代码分享
2015/07/31 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
js模仿java的Map集合详解
2016/01/06 Javascript
你一定会收藏的Nodejs代码片段
2016/02/04 NodeJs
如何利用Promises编写更优雅的JavaScript代码
2016/05/17 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
js date 格式化
2017/02/15 Javascript
js实现拖拽与碰撞检测
2020/09/18 Javascript
WebStorm无法正确识别Vue3组合式API的解决方案
2021/02/18 Vue.js
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python StringIO模块实现在内存缓冲区中读写数据
2015/04/08 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
Python守护进程实现过程详解
2020/02/10 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
html5指南-7.geolocation结合google maps开发一个小的应用
2013/01/07 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
法国美发器材和产品购物网站:Beauty Coiffure
2016/12/05 全球购物
美国翻新电子产品商店:The Store
2019/10/08 全球购物
C&A巴西网上商店:时尚、衣服、手机和鞋子
2020/06/07 全球购物
班班通校本培训方案
2014/03/12 职场文书
师范学院毕业生求职信
2014/06/24 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
辩论赛新闻稿
2015/07/17 职场文书