JS实现文本框只允许输入数字、小数点、字母、汉字
"JavaScript 限制输入的字符类型" 在网页开发中,经常需要对用户在文本框(input)中的输入进行限制,确保他们只能输入特定类型的字符,如数字、小数点、英文字母和汉字。JavaScript 提供了事件监听和正则表达式等工具来实现这种控制。以下是一些实现此功能的方法: 1. 只允许数字和小数点: ```html <input onkeyup="this.value = this.value.replace(/\D/g, '')" onafterpaste="this.value = this.value.replace(/\D/g, '')"> ``` 这段代码通过 `onkeyup` 和 `onafterpaste` 事件监听用户输入和粘贴行为,然后使用正则表达式 `\D` 匹配所有非数字字符并替换为空。 2. 只允许数字: ```html <input onkeyup="if (isNaN(value)) execCommand('undo')" onafterpaste="if (isNaN(value)) execCommand('undo')"> ``` 这里使用 `isNaN` 函数检查输入值是否为数字,如果不是,则撤销输入。 3. 限制输入为数字、小数点及负号: ```html <input type="text" t_value="" ovalue="" onkeypress="if (!this.value.match(/^[\+\-]?\d*?\.?\d*?$/)) this.value = this.t_value; else this.tvalue = this.value; if (this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) this.ovalue = this.value" onkeyup="if (!this.value.match(/^[\+\-]?\d*?\.?\d*?$/)) this.value = this.t_value; else this.tvalue = this.value; if (this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/)) this.ovalue = this.value" onblur="if (!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/)) this.value = this.o_value; else { if (this.value.match(/^\.\d+$/)) this.value = '0' + this.value; if (this.value.match(/^\.$/)) this.value = '0'; this.ovalue = this.value }"> ``` 这个例子允许输入负数、整数和小数,同时处理了失去焦点时的小数点前无数字的情况。 4. 不允许输入数字: ```html <input onkeyup="value = value.replace(/[\d]/g, '')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[\d]/g, ''))" ``` 这段代码阻止用户输入任何数字,包括粘贴的数字。`onbeforepaste` 事件用于在粘贴内容前删除数字。 这些示例展示了如何使用 JavaScript 和正则表达式来限制文本框的输入内容。在实际应用中,可以结合 HTML5 的 `pattern` 属性和其他验证方法,以提供更健壮的输入验证。例如,你可以使用 `pattern` 属性定义一个正则表达式来限制输入,或者使用 `input` 事件来实时检查输入的有效性。对于更复杂的验证需求,可能需要借助表单验证库或自定义函数。在设计用户界面时,确保给出清晰的反馈,告知用户何时输入无效,这样可以提高用户体验。
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')">
2.只能输入数字,能输小数点.
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
<input name=txt1 onchange="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
3.数字和小数点方法二
<input type=text tvalue="" ovalue="" onkeypress="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onkeyup="if(!this.value.match(/^[\+\-]?\d*?\.?\d*?$/))this.value=this.t_value;else this.tvalue=this.value;if(this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?)?$/))this.ovalue=this.value" onblur="if(!this.value.match(/^(?:[\+\-]?\d+(?:\.\d+)?|\.\d*?)?$/))this.value=this.o_value;else{if(this.value.match(/^\.\d+$/))this.value=0+this.value;if(this.value.match(/^\.$/))this.value=0;this.ovalue=this.value}">
4.只能输入字母和汉字
<input onkeyup="value=value.replace(/[\d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[\d]/g,''))" maxlength=10 name="Numbers">
5.只能输入英文字母和数字,不能输入中文
<input onkeyup="value=value.replace(/[^\w\.\/]/ig,'')">
6.只能输入数字和英文<font color="Red">chun</font>
<input onKeyUp="value=value.replace(/[^\d|chun]/g,'')">
7.小数点后只能有最多两位(数字,中文都可输入),不能输入字母和运算符号:
<input onKeyPress="if((event.keyCode<48 || event.keyCode>57) && event.keyCode!=46 || /\.\d\d$/.test(value))event.returnValue=false">
8.小数点后只能有最多两位(数字,字母,中文都可输入),可以输入运算符号:
<input onkeyup="this.value=this.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')">
――――――――――――――――――――――――――――――――――――――――
只能输入汉字:
<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))">
下载后可阅读完整内容,剩余1页未读,立即下载
- 粉丝: 8
- 资源: 150
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- ExtJS 2.0 入门教程与开发指南
- 基于TMS320F2812的能量回馈调速系统设计
- SIP协议详解:RFC3261与即时消息RFC3428
- DM642与CMOS图像传感器接口设计与实现
- Windows Embedded CE6.0安装与开发环境搭建指南
- Eclipse插件开发入门与实践指南
- IEEE 802.16-2004标准详解:固定无线宽带WiMax技术
- AIX平台上的数据库性能优化实战
- ESXi 4.1全面配置教程:从网络到安全与实用工具详解
- VMware ESXi Installable与vCenter Server 4.1 安装步骤详解
- TI MSP430超低功耗单片机选型与应用指南
- DOS环境下的DEBUG调试工具详细指南
- VMware vCenter Converter 4.2 安装与管理实战指南
- HP QTP与QC结合构建业务组件自动化测试框架
- JsEclipse安装配置全攻略
- Daubechies小波构造及MATLAB实现