`

限制HTML的文本编辑框只能输入数字

阅读更多
1. keydown

  通过阻止事件往keypress传播,来禁止非数字字符在文本框显示。

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function prevent(e) {
	e.preventDefault ? e.preventDefault() : e.returnValue = false;
}
function digitInput(el, e) {
	var e = e || window.event; // FF、Chrome IE下获取事件对象
	var c = e.charCode || e.keyCode; //FF、Chrome IE下获取键盘码
	//var txt = $('label').text();
	//$('label').text(txt + ' ' + c);
	var val = el.val();
	if (c == 110 || c == 190){ // 110 (190) - 小(主)键盘上的点
        (val.indexOf(".") >= 0 || !val.length) && prevent(e); // 已有小数点或者文本框为空,不允许输入点
    } else {
        if ((c != 8 && c != 46 && // 8 - Backspace, 46 - Delete
		    (c < 37 || c > 40) && // 37 (38) (39) (40) - Left (Up) (Right) (Down) Arrow
		    (c < 48 || c > 57) && // 48~57 - 主键盘上的0~9
		    (c < 96 || c > 105)) // 96~105 - 小键盘的0~9
		    || e.shiftKey) { // Shift键,对应的code为16
			prevent(e); // 阻止事件传播到keypress
		}
    }
}
$(function(){
	$("input[name='text1']").keydown(function(e) {
		digitInput($(this), e);
    });
});
</script>
</head>
<body>
<input type="text" name="text1" />
<label></label>
</body>
</html>


2. keypress

  捕获的是单个字符,且捕获的键有限,不适合作为限制输入触发事件。

3. keyup
 
  触发时,键对应的字符已经插入到文本框中,这时中断事件是不起作用的。可行方案是替换非数字为空字符,但有明显的替换痕迹:

function digitInput(el, e) {
	var val = el.val();
	var val2 = val.replace(/[^\d]/g, '');
	el.val(val2);
}
$(function(){
	$("input[name='text1']").keyup(function(e) {
		digitInput($(this), e);
    });
});
分享到:
评论

相关推荐

    编辑框限制输入特定文本例程.e.rar

    标题"编辑框限制输入特定文本例程.e.rar"所指向的可能是一个编程示例或代码库,它专门用于演示如何在程序中实现这一功能。下面我们将详细讨论如何在不同编程语言和框架中限制编辑框的输入内容,并给出一些通用的方法...

    解决layui-table单元格编辑只能text问题

    3. **数字框编辑**:对于需要输入数字的场景,我们可以使用layui的input组件,设置type为number,这样就可以限制用户输入非数字字符,并提供上下箭头方便调整数值。 4. **下拉选择**:在单元格中添加下拉选择框,...

    完整版编辑框只能输入汉字例程(更新).e.rar

    在特定的应用场景下,我们可能需要限制编辑框只接受汉字输入,防止用户输入其他字符,如英文、数字或者特殊符号。这个"完整版编辑框只能输入汉字例程(更新).e.rar"压缩包文件似乎包含了一个实现此类功能的代码示例...

    编辑框限制

    2. **输入类型限制**:编辑框可以限制用户输入的字符类型,如只允许输入数字、字母、特殊字符等。例如,密码框通常只允许输入数字和字母,而邮箱输入框则要求包含特定的字符组合。这通常通过正则表达式验证来完成。 ...

    编辑框的使用.rar

    - 数值编辑框(Numeric Box):仅接受数字输入,可以设置范围限制,常用于年龄、价格等数值输入。 - 下拉列表编辑框(Dropdown/ComboBox):提供预设选项供用户选择,也可以手动输入。 2. **编辑框的功能** - ...

    ASCII 字符代码图表,编辑框限制字符功能的例程1.rar

    通过学习这个例程,你可以了解到如何在实际项目中应用ASCII码和限制编辑框输入字符的技术。这将有助于加深对字符编码的理解,以及如何在实际编程中实施输入验证。 总的来说,理解ASCII字符代码图表和编辑框限制字符...

    input,验证,闪动,自动删除,限制输入

    这段JavaScript代码定义了一个名为`onlyNum`的自定义验证函数,用来限制输入框只能输入数字。函数通过检测键盘事件(`event`)的`keyCode`属性来判断用户输入的是不是数字键(包括标准键盘上的数字键和小键盘上的数字...

    动态计算文本框内的可输入字数

    在本场景中,"动态计算文本框内的可输入字数"是一个用户界面(UI)设计的问题,主要应用于网页、桌面应用或移动应用中,目的是为用户提供即时反馈,显示当前文本框内还能输入多少字符。这个功能对于限制用户输入长度...

    用于时间、日期、电话号码、IP地址、邮政编码的编辑框

    在IT领域,编辑框是用户界面(UI)设计中不可或缺的一部分,它们允许用户输入和编辑文本。特定情况下,为了确保数据格式的正确性和一致性,我们会使用特殊类型的编辑框,如标题所提:“用于时间、日期、电话号码、IP...

    关于在输入框内输入大于号或小于号的解决方案

    在IT开发中,特别是在Web应用开发中,...对于使用富文本编辑器的情况,编辑器本身的处理机制已经足够应对这个问题。同时,根据具体应用场景,合理选择前端还是后端处理,平衡安全性和性能,是实现良好用户体验的关键。

    javascript经典特效---input框中的一些技巧2.rar

    JavaScript可以做到这一点,比如限制只能输入数字、字母、汉字等。此外,还可以设置输入长度限制,或者禁止输入某些特殊字符。 五、自动完成和下拉建议 JavaScript结合Ajax技术可以实现输入框的自动完成功能。用户...

    input 高级限制级用法

    在网页设计中,`&lt;input&gt;` 标签用于创建用户可交互的文本输入框,而“高级限制级用法”是指通过添加特定属性和事件处理程序来限制用户在文本框中输入的内容类型或行为。以下是一些常见的高级限制级用法的详细说明: ...

    常用限制input的方法

    限制输入框只能输入数字 可以利用正则表达式来限制输入框内的内容只能包含数字。例如: ```html (/[^0-9]/g, '')" onbeforepaste="clipboardData.setData('text', clipboardData.getData('text').replace(/[^0-9]...

    安全技术,web前端,最常用的正则表达式

    若希望限制输入框只能输入数字,并且避免用户在输入过程中看到输入框内容的闪动现象,可以使用以下代码: ```html (event.keyCode || event.keyCode &gt; 57) event.returnValue = false" onkeypress="if ((event....

    input type是什么意思及常用限制input的方法

    不同的type值决定了输入框的外观和行为,如"number"类型会限制用户只能输入数字,而"date"类型会提供一个日期选择器。每个type属性值对应一种特定的输入方式,如密码、单选按钮、复选框等。 2. 常用限制input的方法...

    jsp中input的高级运用

    有时我们需要确保用户只能输入数字。这可以通过监听`keyup`事件并使用正则表达式来移除非数字字符实现: ```html (/[^0-9]/g, '')" /&gt; ``` 此外,还可以在`onbeforepaste`事件中处理粘贴内容,确保不会粘贴非数字...

    textarea剩余字数

    例如,只允许输入数字: ```html *"&gt; ``` ### 7. jQuery与JavaScript库的扩展 通过jQuery或其他JavaScript库,可以实现更多高级功能,如自动完成、字数统计、自动调整高度等。例如,使用jQuery插件`autosize`可以...

    javascritp实现input输入框相关限制用法

    如果希望文本框内的内容不可编辑,可以使用`readonly`属性: ```html ``` 这样设置后,用户将不能修改文本框中的内容,但仍然可以获取到这些内容。 #### 3. 防止退后清空的 TEXT 文档 有时我们希望用户在输入...

    js代码编辑器制作javascript在线编辑器格式显示代码

    1. **文本编辑器组件**:首先,我们需要一个能够处理文本输入和输出的基础组件。这可以通过HTML的`&lt;textarea&gt;`元素或使用像Ace Editor、CodeMirror这样的第三方库来实现。这些编辑器组件提供了基本的文本输入功能,...

Global site tag (gtag.js) - Google Analytics