基于jquery的设置页面文本框 只能输入数字的实现代码


Posted in Javascript onApril 19, 2011

代码如下:

$("#money").bind("propertychange",function() { 
if(""!=this.value){ 
var str = this.value.replace(/(^\s*)|(\s*$)/g, ""); 
if(this.value != str ) 
this.value = str; 
} 
if( isNaN(Number(this.value))) 
this.value = this.value.replace(/[\D]/,''); 
});

这里使用了JQuery绑定到id为money的文本框的onpropertychange事件上。
下面的代码连小数点也屏蔽掉了
$("#phone").bind("propertychange", function() { 
if(""!=this.value){ 
var str = this.value.replace(/(^\s*)|(\s*$)/g, ""); 
if(this.value != str ) 
this.value = str; 
} 
if (this.value.indexOf('.') != -1) { 
this.value = this.value.replace(/[\.]/, ''); 
this.focus(); } 
if (isNaN(Number(this.value))) { 
this.value = ($.trim(this.value)).replace(/[\D]/, ''); 
this.focus(); } });

最后,最好将输入法屏蔽掉。 通过css,ime-mode:disabled就可以实现。
如果很严格的话,可以再追加上禁止粘贴与拖拽。
禁止粘贴与拖拽实现方法
文本框禁止拖拽和粘贴

在css中实现文本框禁止拖拽和粘贴的功能

建立一个Css,如下:

.TextBox_NotDragpaste { 
ondragenter:expression(ondragenter=function(){return false;}); 
onpaste:expression(onpaste=function(){return false;}); 
}

如果还需要禁止输入中文的功能只需要多加一个语句即可。

如下:

.TextBox_NotDragpaste { 
ime-mode:disabled; 
ondragenter:expression(ondragenter=function(){return false;}); 
onpaste:expression(onpaste=function(){return false;}); 
}
Javascript 相关文章推荐
XHTML下,JS浮动代码失效的问题
Nov 12 Javascript
浅谈tudou土豆网首页图片延迟加载的效果
Jun 23 Javascript
js文件Cookie存取值示例代码
Feb 20 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
JavaScript实现上下浮动的窗口效果代码
Oct 12 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
Jul 12 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
Javascript中parseInt的正确使用方式
Oct 17 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
Jul 30 Javascript
jquery实现简易验证插件封装
Sep 13 jQuery
JS实现简单九宫格抽奖
Jun 28 Javascript
编写自己的jQuery插件简单实现代码
Apr 19 #Javascript
提升你网站水平的jQuery插件集合推荐
Apr 19 #Javascript
分享20款好玩的jQuery游戏
Apr 17 #Javascript
ModelDialog JavaScript模态对话框类代码
Apr 17 #Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 #Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 #Javascript
表单JS弹出填写提示效果代码
Apr 16 #Javascript
You might like
PHP 面向对象程序设计(oop)学习笔记(三) - 单例模式和工厂模式
2014/06/12 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
php array_merge函数使用需要注意的一个问题
2015/03/30 PHP
php-msf源码详解
2017/12/25 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
PHP tp5中使用原生sql查询代码实例
2020/10/28 PHP
Windows Live的@live.com域名注册漏洞 利用代码
2006/12/27 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
修复ie8&chrome下window的resize事件多次执行
2011/10/20 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
js综合应用实例简单的表格统计
2013/09/03 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
JS实时弹出新消息提示框并有提示音响起的实现代码
2016/04/20 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
AngularJS内建服务$location及其功能详解
2016/07/01 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
2017/08/01 jQuery
jQuery实现的简单获取索引功能示例
2018/06/04 jQuery
vue中element-ui表格缩略图悬浮放大功能的实例代码
2018/06/26 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
[01:00:53]OG vs IG 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python中pass语句用法实例分析
2015/04/30 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
韩国著名的在线综合购物网站:Akmall
2016/08/07 全球购物
大学生实习证明范本
2014/09/19 职场文书
人事聘任通知
2015/04/21 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书
2016大学生党校学习心得体会
2016/01/06 职场文书
浅谈react useEffect闭包的坑
2021/06/08 Javascript
pycharm代码删除恢复的方法
2021/06/26 Python
python中__slots__节约内存的具体做法
2021/07/04 Python
Minikube搭建Kubernetes集群
2022/03/31 Servers
redis复制有可能碰到的问题汇总
2022/04/03 Redis