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获取作用在元素上面的样式属性代码
Sep 20 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
Dec 10 Javascript
js 三级关联菜单效果实例
Aug 13 Javascript
javascript动态向网页中添加表格实现代码
Feb 19 Javascript
jQuery.holdReady()方法用法实例
Dec 27 Javascript
JavaScript 基本概念
Jan 20 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
Vue入门学习笔记【基本概念、对象、过滤器、指令等】
Apr 13 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
vue指令v-html使用过滤器filters功能实例
Oct 25 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 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中使用PDO连接数据库的方法
2010/08/01 PHP
浅析php与数据库代码开发规范
2013/08/08 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
PHP微信开发之根据用户回复关键词\位置返回附近信息
2016/06/24 PHP
php实现的网页版剪刀石头布游戏示例
2016/11/25 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP开发中csrf攻击的简单演示和防范
2017/05/07 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
利用PHP如何统计Nginx日志的User Agent数据
2019/03/06 PHP
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
用jQuery中的ajax分页实现代码
2011/09/20 Javascript
javascript中获取下个月一号,是星期几
2012/06/01 Javascript
异步动态加载JS并运行(示例代码)
2013/12/13 Javascript
JavaScript编程的10个实用小技巧
2014/04/18 Javascript
JQuery插件Quicksand实现超炫的动画洗牌效果
2015/05/03 Javascript
jQuery实现的仿select功能代码
2015/08/19 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
探究react-native 源码的图片缓存问题
2017/08/24 Javascript
js+html5生成自动排列对话框实例
2017/10/09 Javascript
js读取本地文件的实例
2017/12/22 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
Python实例之wxpython中Frame使用方法
2014/06/09 Python
python求解数组中两个字符串的最小距离
2018/09/27 Python
详解python:time模块用法
2019/03/25 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
英国花园家具中心:Garden Furniture Centre
2017/08/24 全球购物
自荐信要包含哪些内容
2013/11/06 职场文书
工程专业求职自荐书范文
2014/02/18 职场文书
会计专业自荐信
2014/06/03 职场文书
毕业证代领委托书
2014/09/26 职场文书
出纳岗位职责
2015/01/31 职场文书
小学英语新课改心得体会
2016/01/22 职场文书