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 相关文章推荐
jQuery的实现原理的模拟代码 -5 Ajax
Aug 07 Javascript
jQuery LigerUI 使用教程入门篇
Jan 18 Javascript
javascript中call和apply方法浅谈
Sep 27 Javascript
jQuery实现购物车数字加减效果
Mar 14 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 Javascript
JS拖拽插件实现步骤
Aug 03 Javascript
精通JavaScript的this关键字
May 28 Javascript
微信小程序 swiper制作tab切换实现附源码
Jan 21 Javascript
canvas雪花效果核心代码分享
Feb 19 Javascript
微信小程序 页面传值详解
Mar 10 Javascript
Node.js API详解之 Error模块用法实例分析
May 14 Javascript
React实现阿里云OSS上传文件的示例
Aug 10 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中修改浏览器的User-Agent来伪装你的浏览器和操作系统
2011/07/29 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php中switch语句用法详解
2015/08/17 PHP
写入cookie的JavaScript代码库 cookieLibrary.js
2009/10/24 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
ASP.NET jQuery 实例11 通过使用jQuery validation插件简单实现用户登录页面验证功能
2012/02/03 Javascript
jquery对table中各数据的增加、保存、删除操作示例
2014/05/14 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
2015/03/26 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
2015/05/06 Javascript
AspNet中使用JQuery boxy插件的确认框
2015/05/20 Javascript
JS延时器提示框的应用实例代码解析
2016/04/27 Javascript
JavaScript数组合并的多种方法
2016/05/22 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
怎样判断jQuery当前元素是隐藏还是显示
2016/11/23 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
JavaScript正则表达式的贪婪匹配和非贪婪匹配
2017/09/05 Javascript
Vue from-validate 表单验证的示例代码
2017/09/26 Javascript
简单谈谈vue的过渡动画(推荐)
2017/10/11 Javascript
详解vue中移动端自适应方案
2019/05/05 Javascript
使用原生JS实现火锅点餐小程序(面向对象思想)
2019/12/10 Javascript
vue插槽slot的简单理解与用法实例分析
2020/03/14 Javascript
python实现根据主机名字获得所有ip地址的方法
2015/06/28 Python
在Python中Dataframe通过print输出多行时显示省略号的实例
2018/12/22 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
HTML5 创建canvas元素示例代码
2014/06/04 HTML / CSS
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
美国伴娘礼服商店:Evening Collective
2019/10/07 全球购物
大学生就业推荐信范文
2013/11/29 职场文书
网页美工求职信
2014/02/15 职场文书
双语教学实施方案
2014/03/23 职场文书
三问三解心得体会
2014/09/05 职场文书
2016班级元旦联欢会开幕词
2016/03/04 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
高并发下Redis如何保持数据一致性(避免读后写)
2022/03/18 Redis
搭建Yolov5服务器
2022/04/30 Servers