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限制textarea每行输入字符串长度的代码
Oct 31 Javascript
JavaScript实现网页上的浮动广告的简单方法
Jun 14 Javascript
ExtJS[Desktop]实现图标换行示例代码
Nov 17 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
jQuery实现固定在网页顶部的菜单效果代码
Sep 02 Javascript
JQuery的attr 与 val区别
Jun 12 Javascript
Bootstrap在线电子商务网站实战项目5
Oct 14 Javascript
JS常见算法详解
Feb 28 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
vue中动态添加class类名的方法
Sep 05 Javascript
使用JS获取页面上的所有标签
Oct 18 Javascript
搭建vscode+vue环境的详细教程
Aug 31 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 IF ELSE简化/三元一次式的使用
2011/08/22 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php实现的常见排序算法汇总
2014/09/08 PHP
WordPress特定文章对搜索引擎隐藏或只允许搜索引擎查看
2015/12/31 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
Symfony查询方法实例小结
2017/06/28 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
Draggable Elements 元素拖拽功能实现代码
2011/03/30 Javascript
Javascript中产生固定结果的函数优化技巧
2013/01/16 Javascript
解决javascript:window.close()在chrome,Firefox下失效的问题
2013/05/07 Javascript
前端轻量级MVC框架CanJS详解
2014/09/26 Javascript
详解nodejs与javascript中的aes加密
2016/05/22 NodeJs
js检测离开或刷新页面时表单数据是否更改的方法
2016/08/02 Javascript
JS中定位 position 的使用实例代码
2017/08/06 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vue中使用vue-pdf的方法详解
2020/09/05 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
2020/10/31 Javascript
[59:15]EG vs LGD 2018国际邀请赛淘汰赛BO3 第一场 8.26
2018/08/29 DOTA
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python标准库使用OrderedDict类的实例讲解
2019/02/14 Python
Python socket服务常用操作代码实例
2020/06/22 Python
Python 解析简单的XML数据
2020/07/24 Python
Python extract及contains方法代码实例
2020/09/11 Python
Martinelli官方商店:西班牙皮鞋和高跟鞋品牌
2019/07/30 全球购物
正宗的日本零食和糖果订阅盒:Bokksu
2019/11/21 全球购物
建筑班组长岗位职责
2014/01/02 职场文书
自我检讨书怎么写
2015/05/07 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
详解Nginx 工作原理
2021/03/31 Servers
详解Java七大阻塞队列之SynchronousQueue
2021/09/04 Java/Android
解决redis批量删除key值的问题
2022/03/23 Redis
生命的关键成分来自太空?陨石说是的
2022/04/29 数码科技
使用 Koa + TS + ESLlint 搭建node服务器的过程详解
2022/05/30 NodeJs