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

本文介绍了一种在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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值