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子元素过滤选择器使用示例
Jun 24 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
JavaScript数组各种常见用法实例分析
Aug 04 Javascript
jQuery CSS3自定义美化Checkbox实现代码
May 12 Javascript
JS控制TreeView的结点选择
Nov 11 Javascript
详细AngularJs4的图片剪裁组件的实例
Jul 12 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
JS运动特效之完美运动框架实例分析
Jan 24 Javascript
原生JS实现网页手机音乐播放器 歌词同步播放的示例
Feb 02 Javascript
echarts整合多个类似option的方法实例
Jul 10 Javascript
详解基于Vue/React项目的移动端适配方案
Aug 23 Javascript
Vue看了就会的8个小技巧
Jan 21 Vue.js
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
建立动态的WML站点(三)
2006/10/09 PHP
建站常用13种PHP开源CMS比较
2009/08/23 PHP
php与mysql建立连接并执行SQL语句的代码
2011/07/04 PHP
php递归使用示例(php递归函数)
2014/02/14 PHP
thinkphp在低版本Nginx 下支持PATHINFO的方法分享
2016/05/27 PHP
PHP页面输出搜索后跳转下一页的处理方法
2016/09/30 PHP
thinkPHP多表查询及分页功能实现方法示例
2017/07/03 PHP
js数组操作学习总结
2013/11/04 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
PHP结合jQuery实现红蓝投票功能特效
2015/07/22 Javascript
javascript禁止访客复制网页内容的实现代码
2015/08/05 Javascript
bootstrap输入框组代码分享
2016/06/07 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Node.js爬虫如何获取天气和每日问候详解
2019/08/26 Javascript
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python逐行读写txt文件的实例讲解
2018/04/03 Python
Windows下anaconda安装第三方包的方法小结(tensorflow、gensim为例)
2018/04/05 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
python logging设置level失败的解决方法
2020/02/19 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
HTML5使用drawImage()方法绘制图像
2014/06/23 HTML / CSS
HTML5 新表单类型示例代码
2018/03/20 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
美国最大的无人机经销商:DroneNerds
2018/03/20 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
个人实用的自我评价范文
2013/11/23 职场文书
渡河少年教学反思
2014/02/12 职场文书
奥利奥广告词
2014/03/20 职场文书
博士生求职信
2014/07/06 职场文书
幼儿园大班区域活动总结
2014/07/09 职场文书
医德医风自我评价2015
2015/03/03 职场文书
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技