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 相关文章推荐
SyntaxHighlighter代码加色使用方法
Sep 07 Javascript
JQuery 小练习(实例代码)
Aug 07 Javascript
javascript将数组插入到另一个数组中的代码
Jan 10 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
javascript计时器详解
Feb 28 Javascript
利用Angularjs中模块ui-route管理状态的方法
Dec 27 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Angular.js与node.js项目里用cookie校验账户登录详解
Feb 22 Javascript
jquery实现图片跟随鼠标的实例
Oct 17 jQuery
React Native react-navigation 导航使用详解
Dec 01 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
Aug 12 Javascript
JavaScript对象属性操作实例解析
Feb 04 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
丧钟首部独立剧集《丧钟:骑士与龙》北美正式开播,场面血腥
2020/04/09 欧美动漫
将PHP作为Shell脚本语言使用
2006/10/09 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
解决Laravel5.2 Auth认证退出失效的问题
2019/10/14 PHP
通过隐藏option实现select的联动效果
2009/11/10 Javascript
jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)
2013/02/04 Javascript
使用js解决由border属性引起的div宽度问题
2013/11/26 Javascript
js变形金刚文字特效代码分享
2015/08/20 Javascript
jquery zTree异步加载简单实例讲解
2016/02/25 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
2017/04/28 Javascript
vuejs 单文件组件.vue 文件的使用
2017/07/28 Javascript
教你如何用node连接redis的示例代码
2018/07/12 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
如何使用 vue + d3 画一棵树
2018/12/03 Javascript
jQuery列表动态增加和删除的实现方法
2020/11/05 jQuery
Javascript实现关闭广告效果
2021/01/29 Javascript
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
Python urlopen 使用小示例
2008/09/06 Python
详解Python编程中time模块的使用
2015/11/20 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Vue的el-scrollbar实现自定义滚动
2018/05/29 Python
Python笔记之代理模式
2019/11/20 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
Python识别处理照片中的条形码
2020/11/16 Python
详解CSS3浏览器兼容
2016/12/14 HTML / CSS
详解如何将 Canvas 绘制过程转为视频
2021/01/25 HTML / CSS
国际性能运动服装品牌:Dare 2b
2018/07/27 全球购物
如果NULL和0作为空指针常数是等价的,那我到底该用哪一个
2014/09/16 面试题
如何删除一个表里面的重复行
2013/07/13 面试题
建材业务员岗位职责
2013/12/08 职场文书
小学生秋游活动方案
2014/02/23 职场文书
道歉信范文
2015/05/12 职场文书
中学政教处工作总结
2015/08/13 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
XX部保密工作制度范本
2019/08/27 职场文书