基于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 相关文章推荐
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
千分位数字格式化(用逗号隔开 代码已做了修改 支持0-9位逗号隔开)的JS代码
Dec 05 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
javascript中使用未定义变量或值的情况分析
Jul 19 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
es7学习教程之Decorators(修饰器)详解
Jul 21 Javascript
详解mpvue开发小程序小总结
Jul 25 Javascript
Nuxt.js实现校验访问浏览器类型的中间件
Aug 24 Javascript
js中Generator函数的深入讲解
Apr 07 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
微信小程序实现点击卡片 翻转效果
Sep 04 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 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和ACCESS写聊天室(二)
2006/10/09 PHP
PHP防止表单重复提交的几种常用方法汇总
2014/08/19 PHP
一个php生成16位随机数的代码(两种方法)
2014/09/16 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
laravel中命名路由的使用方法
2017/02/24 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
js confirm()方法的使用方法实例
2013/07/13 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
使用微信内置浏览器点击下拉框出现页面乱跳转现象(iphone),该怎么办
2016/01/04 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
JavaScript 数据类型详解
2017/03/13 Javascript
利用NPM淘宝的node.js镜像加速nvm
2017/03/27 Javascript
ES6中Symbol类型用法实例详解
2017/04/06 Javascript
three.js实现3D影院的原理的代码分析
2017/12/18 Javascript
Vue+Flask实现简单的登录验证跳转的示例代码
2018/01/13 Javascript
vue 获取视频时长的实例代码
2019/08/20 Javascript
python中找出numpy array数组的最值及其索引方法
2018/04/17 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
python中的TCP(传输控制协议)用法实例分析
2019/11/15 Python
Python函数式编程实例详解
2020/01/17 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
厨师岗位职责
2013/11/12 职场文书
中学门卫岗位职责
2013/12/26 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
环保倡议书50字
2014/05/15 职场文书
企业安全标语
2014/06/07 职场文书
政风行风评议心得体会
2014/10/21 职场文书
万里长城导游词
2015/01/30 职场文书
初中政治教学工作总结
2015/08/13 职场文书
Nginx开启Brotli压缩算法实现过程详解
2021/03/31 Servers
apache基于端口创建虚拟主机的示例
2021/04/24 Servers
Java面试题冲刺第十七天--基础篇3
2021/08/07 面试题