基于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 相关文章推荐
本地图片预览(支持IE6/IE7/IE8/Firefox3)经验总结
Mar 25 Javascript
编程语言JavaScript简介
Oct 16 Javascript
JsRender for object语法简介
Oct 31 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
javascript实现动态标签云
Oct 16 Javascript
Jquery1.9.1源码分析系列(六)延时对象应用之jQuery.ready
Nov 24 Javascript
JavaScript中的冒泡排序法
Aug 03 Javascript
jQuery鼠标事件总结
Oct 13 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 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
dedecms 批量提取第一张图片最为缩略图的代码(文章+软件)
2009/10/29 PHP
关于file_get_contents返回为空或函数不可用的解决方案
2013/06/24 PHP
CodeIgniter CLI模式简介
2014/06/17 PHP
初识php MVC
2014/09/10 PHP
详解PHP中的状态模式编程
2015/08/11 PHP
jquer之ajaxQueue简单实现代码
2011/09/15 Javascript
js中文逗号转英文实现
2014/02/11 Javascript
用svg制作富有动态的tooltip
2015/07/17 Javascript
js实现精确到毫秒的倒计时效果
2016/08/05 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
vue2.0 axios前后端数据处理实例代码
2017/06/30 Javascript
JavaScript实现短信倒计时60s
2017/10/09 Javascript
在 Linux/Unix 中不重启 Vim 而重新加载 .vimrc 文件的流程
2018/03/21 Javascript
微信小程序wx.navigateTo中events属性实现页面间通信传值,数据同步
2019/07/13 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
Python程序设计入门(5)类的使用简介
2014/06/16 Python
Python中自定义函数的教程
2015/04/27 Python
Python使用ntplib库同步校准当地时间的方法
2016/07/02 Python
详解python中requirements.txt的一切
2017/03/03 Python
对Python中内置异常层次结构详解
2018/10/18 Python
Python列表(List)知识点总结
2019/02/18 Python
python标记语句块使用方法总结
2019/08/05 Python
python 代码实现k-means聚类分析的思路(不使用现成聚类库)
2020/06/01 Python
解决Python 函数声明先后顺序出现的问题
2020/09/02 Python
利用python爬取有道词典的方法
2020/12/08 Python
详解CSS3中强大的filter(滤镜)属性
2017/06/29 HTML / CSS
HTML5单页面手势滑屏切换原理
2016/03/21 HTML / CSS
法国综合购物网站:RueDuCommerce
2016/09/12 全球购物
Sunglasses Shop德国站:欧洲排名第一的太阳镜网站
2017/08/01 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
实习单位鉴定评语
2014/04/26 职场文书
党员个人公开承诺书
2014/08/29 职场文书
入党函调证明材料
2014/12/24 职场文书
联谊会开场白
2015/06/01 职场文书
结婚典礼主持词
2015/06/29 职场文书