js完美解决jsp文本框限制只能输入数字、小数问题

js完美解决jsp文本框限制只能输入数字、小数问题,只需 <input name="text" type="text" size="10" oncontextmenu="return false;" oncontextmenu="return false;" onKeyDown="keyNumDown(this, '8', '2')"> oncontextmenu="return false;" oncontextmenu="return false;":防止右键粘贴 ### js完美解决JSP文本框限制只能输入数字、小数问题 在Web开发过程中,确保用户输入的数据符合预期格式是一项非常重要的任务。特别是在涉及到数值输入时,开发者常常需要限制文本框仅能接受数字或者带有一定数量小数位的数字输入。本文将详细解析一种使用JavaScript(简称JS)的方法来实现这一需求,特别适用于JavaServer Pages (JSP) 环境中的表单输入控制。 #### 关键知识点 1. **HTML Input 元素与事件处理** - 使用`<input>`标签创建一个文本框。 - 通过`oncontextmenu`事件禁止用户通过右键菜单粘贴内容。 - 通过`onKeyDown`事件监听键盘输入,并调用自定义函数进行验证。 2. **JavaScript 函数详解** - `getPosition(obj)`:用于获取光标位置。 - `keyNumDown(obj, count1, count2)`:主要函数,用于限制用户输入特定格式的数字(整数部分最多`count1`位,小数部分最多`count2`位)。 3. **代码逻辑分析** - **获取光标位置**:`getPosition`函数根据浏览器类型(IE或其他)采用不同方法获取当前光标位置。 - **键盘事件处理**: - 首先检查按键是否为允许的按键(如删除键、方向键等),如果是,则允许输入。 - 对于数字键和小数点键,进一步判断输入是否符合指定的格式限制。 - 如果不符合格式要求,则阻止该次键盘输入。 4. **示例代码解读** ```javascript function getPosition(obj) { var result = 0; if (obj.selectionStart) { // 非IE浏览器 result = obj.selectionStart; } else { // IE浏览器 var rng; if (obj.tagName == "TEXTAREA") { // TEXTAREA元素 rng = event.srcElement.createTextRange(); rng.moveToPoint(event.x, event.y); } else { // Text元素 rng = document.selection.createRange(); } rng.moveStart("character", -event.srcElement.value.length); result = rng.text.length; } return result; } function keyNumDown(obj, count1, count2) { var k = window.event.keyCode; var len = obj.value.length; var index = obj.value.indexOf(".") + 1; // 按键判断逻辑 if ((k == 46) || (k == 8) || (k >= 37 && k <= 40)) { // 允许删除键、方向键等 } else if ((k >= 96 && k <= 105) || (k >= 48 && k <= 57)) { // 数字键 if (index == 0 && len >= count1) { window.event.returnValue = false; } else if (index != 0) { if (getPosition(obj) >= index && (len - index) >= count2) { window.event.returnValue = false; } else if (getPosition(obj) < index && index >= count1) { window.event.returnValue = false; } } } else if ((k == 190) || (k == 110)) { // 小数点键 if (count2 == 0) { window.event.returnValue = false; } else if (len == 0) { window.event.returnValue = false; } else { if (index != 0) { window.event.returnValue = false; } } } else if (k == 13) { // Enter键处理 window.event.keyCode = 9; } else { // 其他按键一律不允许 window.event.returnValue = false; } } ``` 5. **应用场景与注意事项** - 适用于需要用户输入特定格式数字的场景。 - 注意兼容不同浏览器的实现方式。 - 考虑到用户体验,建议提供输入错误的提示信息。 #### 总结 通过上述介绍,我们了解了如何使用JavaScript结合HTML实现对JSP页面中数字输入框的限制功能。这种方法不仅能够有效防止用户输入非法数据,还能提升系统的稳定性和安全性。同时,需要注意的是,在实际应用中还需考虑各种特殊情况和异常处理,确保程序的健壮性。















function getPosition(obj) {
var result = 0;
if (obj.selectionStart) { // IE以外
result = obj.selectionStart
} else { // IE
var rng;
if (obj.tagName == "textarea") { // TEXTAREA
rng = event.srcElement.createTextRange();
rng.moveToPoint(event.x, event.y);
} else { // Text
rng = document.selection.createRange();
}
rng.moveStart("character", -event.srcElement.value.length);
result = rng.text.length;
}
return result;
}
//只能输入小数点钱count1位,小数点后cout2位
/*
* 利用样式表(style="ime-mode:disabled" )可以防止切换成汉字输入法,也就是说只能使用英文输入法,这样就防止了输入汉字的情况。
* js脚本就是要限制键盘输入,只能填入数字、小数点、负号、退格键、删除键和方向键。
* ascii码说明: 8:退格键 46:delete 37-40: 方向键 48-57:小键盘区的数字 96-105:主键盘区的数字
* 110、190:小键盘区和主键盘区的小数点 189、109:小键盘区和主键盘区的负号
* 13:回车 9: Tab 就是那个把焦点移到下一个文本框的东东。
* 对了还有两个缺点: 1、没有验证多个小数点的情况。 2、没有验证多个负号,和符号必须在前的情况。
*/
function keyNumDown(obj, count1, count2) {
var k = window.event.keyCode;
var len = obj.value.length;

- 粉丝: 1
我的内容管理 展开
我的资源 快来上传第一个资源
我的收益
登录查看自己的收益我的积分 登录查看自己的积分
我的C币 登录后查看C币余额
我的收藏
我的下载
下载帮助


最新资源
- 山西省软件产品销售合同.docx
- 互联网金融法律风险与风险防范对策(1).docx
- 基于软件通信体系结构的波形应用研究与实现的开题报告.docx
- 计算机的产生和发展知识课件.ppt
- 浅谈互联网+背景下高校教师信息素养的提升.docx
- ASP移动文件函数movefile权限不足的替代方法.doc
- 第五章多单片机系统与通信总线智能仪表资料教程.ppt
- C#实现winform自动关闭MessageBox对话框的方法.doc
- 江苏省计算机一级考试复习.doc
- 基于语义Web的数字图书馆资源语义描述方法研究的开题报告.docx
- 基于大数据背景下的企业财务管理创新策略.docx
- 电子商务与网络营销课后思考题答案.doc
- 2023年全国安全知识网络竞赛试题及答案.doc
- 大数据技术项目可行性研究报告.doc
- php程序员的求职简历模板.docx
- GB T14468.21999工业机器人轴形机械接口.pdf



- 1
- 2
前往页