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 相关文章推荐
encode脚本和normal脚本混用的问题与解决方法
Mar 08 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
Js控制弹窗实现在任意分辨率下居中显示
Aug 01 Javascript
javascript打印输出json实例
Nov 11 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
Feb 04 Javascript
JavaScript基于原型链的继承
Jun 22 Javascript
Vue.js动态添加、删除选题的实例代码
Sep 30 Javascript
浅谈Angular.js中使用$watch监听模型变化
Jan 10 Javascript
详解React开发必不可少的eslint配置
Feb 05 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
vue实现打地鼠小游戏
Aug 21 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 str_pad 函数使用详解
2009/01/13 PHP
解析PHP获取当前网址及域名的实现代码
2013/06/23 PHP
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
WordPress过滤垃圾评论的几种主要方法小结
2016/07/11 PHP
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
javascript加号&quot;+&quot;的二义性说明
2013/03/04 Javascript
js 实现菜单上下显示附效果图
2013/11/21 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
jquery通过closest选择器修改上级元素的方法
2015/03/17 Javascript
javascript使用shift+click实现选择和反选checkbox的方法
2015/05/04 Javascript
javascript常用方法总结
2015/05/14 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
jquery制作属于自己的select自定义样式
2015/11/23 Javascript
jquery获取复选框的值的简单实例
2016/05/26 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
node.JS路径解析之PATH模块使用方法详解
2020/02/06 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
JavaScript Array.flat()函数用法解析
2020/09/02 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
详解阿里Node.js技术文档之process模块学习指南
2021/01/04 Javascript
[01:05:12]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS CIS-GAME
2014/05/21 DOTA
[06:44]2014DOTA2国际邀请赛-钥匙体育馆开战 开幕式振奋人心
2014/07/19 DOTA
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
python监控进程脚本
2018/04/12 Python
Python检测数据类型的方法总结
2019/05/20 Python
django项目用higcharts统计最近七天文章点击量
2019/08/17 Python
tensorflow 模型权重导出实例
2020/01/24 Python
Myprotein比利时官方网站:欧洲第一运动营养品牌
2020/10/04 全球购物
专业实习自我鉴定
2013/10/29 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
JS中一些高效的魔法运算符总结
2021/05/06 Javascript
MySQL分区表管理命令汇总
2022/03/21 MySQL