zoukankan      html  css  js  c++  java
  • 限制文本框只能输入数字或浮点数的JS脚步

    1、oninput,onpropertychange,onchange的用法

    l          onchange触发事件必须满足两个条件:

    a)当前对象属性改变,并且是由键盘或鼠标事件激发的(脚本触发无效)

    b)当前对象失去焦点(onblur);

    l          onpropertychange的话,只要当前对象属性发生改变,都会触发事件,但是它是IE专属的;

    l          oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于对象时,并非该对象所有属性改变都能触发事件,它只在对象value值发生改变时奏效。

    在textarea中,如果想捕获用户的键盘输入,用onkeyup检查事件就可以了,但是onkeyup并不支持复制和粘贴,因此需要动态监测textarea中值的变化,这就需要onpropertychange(用在IE浏览器)和oninput(非IE浏览器)结合在一起使用了。

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>限制文本框输入数字或浮点数(暂只支持IE)</title>
    </head>
    <body>
        <table border="0" cellspacing="1" cellpadding="0" width="100%" style="background-color:#ccc; font-size:12px;">
            <tr>
                <td style="height:100px; background-color:#fff;" colspan="2" align="center" valign="middle">
                  <h3>限制文本框输入数字或浮点数(暂只支持IE)</h3></td>
            </tr>
            <tr>
                <td style=" 30%; height:25px; background-color:#fff; padding-left:10px;">
                    该文本框只允许输入整型:</td>
                <td style=" background-color:#fff; padding-left:10px;">
                    <input type="text" id="input1" name="input1" onpropertychange="javascript:CheckInputInt(this);" /></td>
            </tr>
            <tr>
                <td style=" 30%; height: 25px; background-color: #fff; padding-left:10px;">
                    该文本框允许输入浮点数:</td>
                <td style="background-color: #fff; padding-left:10px;">
                    <input type="text" id="input2" name="input2" onpropertychange="javascript:CheckInputFloat(this);" /></td>
            </tr>
            <tr>
                <td align="center" colspan="2" rowspan="2" style="padding-left: 10px; height: 58px;
                    background-color: #fff">
                    <a href="http://bbs.51aspx.com">返回上级</a></td>
            </tr>
            <tr>
            </tr>
        </table>
        
        <script language="javascript" type="text/javascript">  
      // Int 51-aspx
      function CheckInputInt(oInput)
      {
          if  ('' != oInput.value.replace(/d/g,''))
          {
              oInput.value = oInput.value.replace(/D/g,'');
          }
      }
      
      //Float 51aspx
      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,}/);
          }
      }  
    </script>
        
    </body>
    </html>
  • 相关阅读:
    Python--my first try!
    AB PLC首次IP地址如何分配
    如何解压DMK固件
    罗克韦尔自动化官网如何下载设备固件
    如何使用AB PLC仿真软件Studio 5000 Logix Emulate
    Studio 5000指令IN_OUT管脚实现西门子风格
    AB PLC分类
    罗克韦尔自动化发展简史
    C#曲线分析平台的制作(五,Sqldependency+Signalr+windows 服务 学习资料总结)
    自动化监控上位机系统二次开发之我见
  • 原文地址:https://www.cnblogs.com/Unrmk-LingXing/p/4365941.html
Copyright © 2011-2022 走看看