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 相关文章推荐
textarea的value是html文件源代码,存成html文件的代码
Apr 20 Javascript
JavaScript 调试器简介
Feb 21 Javascript
JavaScript高级程序设计(第3版)学习笔记13 ECMAScript5新特性
Oct 11 Javascript
使用jquery动态加载javascript以减少服务器压力
Oct 29 Javascript
js setTimeout 参数传递使用介绍
Aug 13 Javascript
jQuery中多个元素的Hover事件解决方案
Jun 12 Javascript
javascript如何实现360度全景照片问题汇总
Apr 04 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
Vue项目中跨域问题解决方案
Jun 05 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
js+css3实现炫酷时钟
Aug 18 Javascript
antd中table展开行默认展示,且不需要前边的加号操作
Nov 02 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语法速查表
2006/12/06 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
深入array multisort排序原理的详解
2013/06/18 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
Laravel 中获取上一篇和下一篇数据
2015/07/27 PHP
php文件上传后端处理小技巧
2016/05/22 PHP
php 修改上传文件大小限制实例详解
2016/10/23 PHP
php基于环形链表解决约瑟夫环问题示例
2017/11/07 PHP
PHP+MySQL实现消息队列的方法分析
2018/05/09 PHP
php实现每日签到功能
2018/11/29 PHP
JavaScript字符串插入、删除、替换函数使用示例
2013/07/25 Javascript
使用javascript为网页增加夜间模式
2014/01/26 Javascript
用Move.js配合创建CSS3动画的入门指引
2015/07/22 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
JS面向对象(3)之Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
2016/02/25 Javascript
深入理解JavaScript中的并行处理
2016/09/22 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
vue webpack实用技巧总结
2018/04/24 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
Python 元类使用说明
2009/12/18 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
scrapy-redis的安装部署步骤讲解
2019/02/27 Python
python输入中文的实例方法
2020/09/14 Python
HTML5实现动画效果的方式汇总
2016/02/29 HTML / CSS
运动服饰每月订阅盒:Ellie
2018/04/29 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
大学生创业策划书
2014/02/02 职场文书
大二学生职业生涯规划书
2014/02/05 职场文书
高中军训的心得体会
2014/09/01 职场文书
小学数学教师研修日志
2015/11/13 职场文书
MongoDB连接数据库并创建数据等使用方法
2021/11/27 MongoDB
Python绘制散乱的点构成的图的方法
2022/04/21 Python
GoFrame框架数据校验之校验结果Error接口对象
2022/06/21 Golang