昨天做了个测试onkeypress 检测输入的数据 先记录下
可惜只有IE支持ime-mode:disabled
function checkInputNumber(ele,checkType,maxPoint){
ele.onkeypress = function(e){
var e = e || window.event,
charCode = typeof e.charCode == "number" ? e.charCode : e.keyCode;
if(checkType == "voucherNumber"){ //数字
if(!/\d/.test(String.fromCharCode(charCode)) && charCode > 9){
preventDefault(e);
}
}
else if(checkType == "amount"){ //金额 maxPoint为保留的小数位数
if( (!/\d/.test(String.fromCharCode(charCode)) && charCode != 46) || (charCode == 46 && ele.value.indexOf(".") > -1) ||
/\d/.test(String.fromCharCode(charCode)) && ele.value.indexOf(".") > -1 && (ele.value.indexOf(".") + 1 + maxPoint) == ele.value.length && getCursortPosition(ele) > ele.value.indexOf(".")){
if(charCode > 9){
preventDefault(e);
}
}
}
};
ele.onpaste = function(){
preventDefault(e);
}
}
function preventDefault(e){
if(e.preventDefault){
e.preventDefault();
}else{
window.event.returnValue = false;
}
}
function getCursortPosition (ele) {//获取光标位置函数
var cursorPos = 0; // IE Support
if (document.selection) {
ele.focus ();
var Sel = document.selection.createRange ();
Sel.moveStart ('character', -ele.value.length);
cursorPos = Sel.text.length;
}
// Firefox support
else if (ele.selectionStart || ele.selectionStart == '0')
cursorPos = ele.selectionStart;
return cursorPos;
}
checkInputNumber(document.getElementById("voucherNumber"),"voucherNumber");
checkInputNumber(document.getElementById("amountId"),"amount",2);
分享到:
相关推荐
总的来说,通过`keyCode`和`onkeypress`事件,我们可以有效地检测用户在输入框中输入的是否为数字,从而保证数据的准确性。然而,为了提供更好的用户体验和更全面的安全性,建议结合其他验证技术和策略一起使用。
2. **分析输入数据**: - 扫描枪通常会读取一整串连续的字符,而键盘输入则更可能包含间隔或错误。可以通过分析输入字符串的连续性和一致性来判断。 - 如果条形码或二维码包含特定前缀或后缀,比如“#”或“^C”,...
- 第二个输入框使用 `onchange` 事件,在输入值改变时,通过正则表达式 `/ \D /` 检测是否有非数字字符,如果有,则提示用户“仅限数字”,并将值清空。 #### 方法三:控制小数点输入 ```html ...
在JavaScript中,获取扫码枪输入数据的关键在于区分扫码枪与普通键盘输入,并且要能够实时地处理连续的字符流。由于扫码枪输入速度通常比手动输入快很多,因此可以通过监听键盘事件来判断输入来源。以下是两种不同的...
当检测到非法输入时,使用`execCommand('undo')`撤销操作,或者直接清空输入框,并弹出警告,提供更友好的用户体验。 ### 3. 限制浮点数输入格式 ```html <input type=text t_value="" o_value="" onkeypress="......
这段代码通过检测按键码(`event.keyCode`),阻止非数字键和多余的小数点输入,同时限制小数点后最多两位数字。 ### 8. 控制小数点格式的输入 ```html (/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')"> ``` 通过正则...
在C# WinForm开发中,用户界面的交互性是至关重要的,尤其是对于数据输入部分。"C# 便捷输入"这个主题关注的是如何优化文本框(TextBox)输入体验,特别是当用户需要输入数字、字母,并可能偶尔插入特殊字符时。通过...
- **数字输入限制**:通过`indexOf`和`substring`方法来检测小数点后的位数是否超过了指定长度。 #### 五、扩展与优化 1. **增加输入提示**:可以通过弹出提示框的方式告诉用户哪些输入是非法的。 2. **增强兼容性*...
最后,当检测到回车键(表示扫码结束)时,我们获取当前的`code`值,这应该包含完整的条形码数据,然后使用Ajax调用登录接口,将数据发送到服务器进行验证和登录操作。如果登录成功,通常会重定向到登录后的页面;...
在C#编程环境中,开发GUI应用时经常需要用到各种...这在需要进行数字输入的场景中非常有用,如年龄、价格、数量等字段,可以有效防止用户输入错误数据。通过以上步骤,你可以轻松地在自己的项目中实现这样一个控件。
这些技术对于确保用户输入的数据符合预期格式非常有用,在多种应用场景下都非常重要。 ### 一、限制输入为数字、英文字符及汉字 #### 1. 基本实现原理 在JavaScript中,可以通过正则表达式来过滤不符合要求的字符...
在使用Vue框架结合Element UI组件库开发应用时,el-input组件是一个常用的表单输入框,它可以用来获取用户的输入数据。然而,在实际应用中,我们往往需要对用户的输入进行限制,比如限制输入类型、输入格式、输入...
- **实现原理**:利用`isNaN()`函数检测输入值是否为非数字,如果是,则调用`execCommand('undo')`撤销上一次输入动作。 - **应用场景**:适用于希望阻止用户输入非数字字符的情况。 ##### 3. 数字格式化 ```html ...
### JS各种限制input输入汇总知识点解析 #### 一、取消按钮按下时的虚线框 在Web开发过程中,用户点击按钮或输入框...这些技术可以帮助开发者更好地控制用户输入,提升用户体验的同时也提高了数据的有效性和安全性。
1. **移除非法字符**:通过`onkeyup`事件监听文本框的输入行为,一旦检测到非法字符(如标点符号、特殊符号等),立即使用正则表达式将这些字符替换为空字符串,从而实现输入限制。 - 示例代码:`onkeyup="value=...
在这个例子中,我们监听了文本框的`input`事件,当检测到输入不符合预设规则时,通过`event.preventDefault()`来阻止默认的输入行为。 在实际开发中,我们可能还需要考虑到更多的细节,例如,用户可能通过剪贴板...
在网页开发中,限制用户在输入框(Input)中输入的字符长度是一项常见的需求,尤其在数据验证或者信息填写时。本示例中,我们探讨了两种JavaScript方法来实现这一功能,分别针对英文、数字以及中文字符。 1. **...
首先,HTML部分创建了一个简单的表单,包含了多个输入字段,每个字段都有一个特定的`onkeypress`事件处理器,例如`checkComments()`、`checkEmail()`等。这些事件处理器会在用户按下键盘按键时被调用,以检查输入的...