基于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 相关文章推荐
jQuery实现的Email中的收件人效果(按del键删除)
Mar 20 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
JScript分割字符串示例代码
Sep 04 Javascript
深入理解jquery中extend的实现
Dec 22 Javascript
Angular.js中ng-if、ng-show和ng-hide的区别介绍
Jan 20 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
原生JavaScript实现精美的淘宝轮播图效果示例【附demo源码下载】
May 27 Javascript
详解利用 Express 托管静态文件的方法
Sep 18 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
编写自己的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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
克隆一个新项目的快捷方式
2013/04/10 PHP
关于js与php互相传值的介绍
2013/06/25 PHP
ThinkPHP访问不存在的模块跳转到404页面的方法
2014/06/19 PHP
JavaScript 关键字屏蔽实现函数
2009/08/02 Javascript
jquery 学习之二 属性(html()与html(val))
2010/11/25 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
2011/07/13 Javascript
广泛收集的jQuery拖放插件集合
2012/04/09 Javascript
JavaScript设置首页和收藏页面的小例子
2013/11/11 Javascript
JSON相关知识汇总
2015/07/03 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
vue-cli 组件的导入与使用教程详解
2018/04/11 Javascript
微信二次分享报错invalid signature问题及解决方法
2019/04/01 Javascript
js console.log打印对象时属性缺失的解决方法
2019/05/23 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue实现移动端input上传视频、音频
2020/08/18 Javascript
全面解析Vue中的$nextTick
2020/12/24 Vue.js
Python模拟百度登录实例详解
2016/01/20 Python
Python实现的简单排列组合算法示例
2018/07/04 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python模块和包的应用BASE_PATH使用解析
2019/12/14 Python
Pytorch .pth权重文件的使用解析
2020/02/14 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
django执行原始查询sql,并返回Dict字典例子
2020/04/01 Python
Python与C/C++的相互调用案例
2021/03/04 Python
3种方式实现瀑布流布局小结
2019/09/05 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
英国亚马逊官方网站:Amazon.co.uk
2019/08/09 全球购物
关于学习的演讲稿
2014/05/10 职场文书
法制宣传口号
2014/06/16 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
python scipy 稀疏矩阵的使用说明
2021/05/26 Python
Apache Linkis 中间件架构及快速安装步骤
2022/03/16 Servers