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 相关文章推荐
JavaScript Date对象使用总结
May 14 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
JSON相关知识汇总
Jul 03 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
浅谈js中的引用和复制(传值和传址)
Sep 18 Javascript
微信小程序 视图层(xx.xml)和逻辑层(xx.js)详细介绍
Oct 13 Javascript
Angularjs中的页面访问权限怎么设置
Nov 11 Javascript
node上的redis调用优化示例详解
Oct 30 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
layui table数据修改的回显方法
Sep 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
8个必备的PHP功能开发
2015/10/02 PHP
php+jQuery递归调用POST循环请求示例
2016/10/14 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
ASP Json Parser修正版
2009/12/06 Javascript
心扬JS分页函数代码
2010/09/10 Javascript
js 通用javascript函数库整理
2011/08/14 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
javascript实现图片延迟加载方法汇总(三种方法)
2015/08/27 Javascript
基于jQuery实现左右图片轮播(原理通用)
2015/12/24 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
2017/04/18 Javascript
vue中使用GraphQL的实例代码
2019/11/04 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Python button选取本地图片并显示的实例
2019/06/13 Python
Python使用百度翻译开发平台实现英文翻译为中文功能示例
2019/08/08 Python
pandas的to_datetime时间转换使用及学习心得
2019/08/11 Python
python2和python3实现在图片上加汉字的方法
2019/08/22 Python
python3 图片 4通道转成3通道 1通道转成3通道 图片压缩实例
2019/12/03 Python
Linux下升级安装python3.8并配置pip及yum的教程
2020/01/02 Python
Docker部署Python爬虫项目的方法步骤
2020/01/19 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
CSS3 @keyframes简单动画实现
2018/02/24 HTML / CSS
New Balance天猫官方旗舰店:始于1906年,百年慢跑品牌
2017/11/15 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
企业出纳岗位职责
2014/03/12 职场文书
酒店管理专业毕业生求职自荐信
2014/04/28 职场文书
材料员岗位职责
2015/02/10 职场文书
干货:如何写好工作总结报告!
2019/05/10 职场文书
创新创业项目计划书该怎样写?
2019/08/13 职场文书
MySQL sql_mode的使用详解
2021/05/08 MySQL
适合后台管理系统开发的12个前端框架(小结)
2021/06/29 Javascript
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript
Python爬虫中urllib3与urllib的区别是什么
2021/07/21 Python
Android Rxjava3 使用场景详解
2022/04/07 Java/Android