JS限制文本框只能输入整形或浮点数

最新推荐文章于 2024-07-14 17:31:10 发布

转载最新推荐文章于 2024-07-14 17:31:10 发布 · 260 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/treeyh/archive/2008/02/19/1072488.html

文章标签：

#javascript #ViewUI

本文介绍了一种在Internet Explorer浏览器中限制文本框输入为纯数字或浮点数的方法，利用onpropertychange事件配合正则表达式实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

        这个问题应该是老生常谈了，但是始终不好解决，有以下需要进行限制：
        1、敲击键盘只能输入输入数字；
        2、复制的时候也需要删除非数字字符；
        3、使用输入法也应该只认数字；
        4、在页面中选择一段文字，直接拖拽，也应该能进行筛选；

        所以我们需要一个在任何时候只要文本框内容发生变化就触发的事件，来完成上述工作，而不是单纯的onchange事件。

        让我们庆幸的是IE中提供一个onpropertychange事件，他可以捕捉到文本框任何文本变化。接下来就简单了，通过这个事件我们就可以定义以下两个方法来处理整形和浮点数的输入限制。

// Int
function CheckInputInt(oInput)
{
     if   ( '' != oInput.value.replace( / \d / g, '' ))
    {
        oInput.value = oInput.value.replace( / \D / g, '' );
    }
}

// Float
function CheckInputFloat(oInput)
{
     if ( '' != oInput.value.replace( / \d{1,}\.{0,1}\d{0,} / , '' ))
    {
        oInput.value = oInput.value.match( / \d{1,}\.{0,1}\d{0,} / ) == null ? '' :oInput.value.match( / \d{1,}\.{0,1}\d{0,} / );
    }
}

HTML Code：

< table >

< tbody >

< tr >

< td >

该文本框只允许输入整型： < input type ="text" id ="input1" name ="input1" onpropertychange ="javascript:CheckInputInt(this);" />

</ td >

</ tr >

< tr >

< td >

该文本框允许输入浮点数： < input type ="text" id ="input2" name ="input2" onpropertychange ="javascript:CheckInputFloat(this);" />

</ td >

</ tr >

</ tbody >

</ table >

遗憾的是在FireFox中是没有这个事件的，所以如果是做系统限制客户只能用IE浏览器，这个方法完全实用：）

而这个事件在IE4.0中就得到了支持，可能FireFox在标准化方面做得是比较出色的，但是对于我来说，只有实用的才是好的。例如，innerHTML、innerText方法相当实用，同样它也不是标准方法。

当然我只是抛砖引玉，希望如果哪位高人知道FireFox中如何实现，万望告知，谢谢：）

示例请看这里

转载于:https://www.cnblogs.com/treeyh/archive/2008/02/19/1072488.html