JavaScript实现,控制一个文本框只能输入正整数,如输入不符合条件则文本框全部字体标红

腾讯2014年研发职位笔试题Web前端方向简单题第一题。

 

代码：

<html>
  <head>
    <title>test JavaScript</title>
    <script>
      window.onload = function() {
      var inputInt = document.getElementById('InputInt');
      inputInt.onkeyup = function() {
        var num = this.value;
        var re =/^[0-9]*[1-9][0-9]*$/;
        if (!re.test(num)) {
          this.style.color = "red";
        } else {
          this.style.color = "black";
        }
      };
      
      }
      
    </script>
  </head>
  <body>
    <input id="InputInt" type="number" > 
  </body>
</html>

用多了jQuery，都差点忘了原生js长什么样了:(

顺便复习一下。

首先，window.onload事件：浏览器加载完DOM后，会通过javascript为DOM元素添加事件。jQuery里面是$(document).ready()

这两者也还是有区别的：

  window.onload $(document).ready()
执行时机 页面所有元素（包括图片及引用文件）加载完后执行

页面内所有HTML DOM， CSS DOM加载完就会执行。

如果想要所有元素（包括图片及引用文件）加载完再注册事件可以用$(window).load(function);等价于window.onload()
可编写个数 只能一个。后写的会覆盖前面写的。 可以同时有多个。

 

 然后就是获取元素，绑定onkeyup函数，在键盘按下放开的时候判断input内的元素是否符合正整数的正则表达式，不符合则文本框内颜色变红，否则颜色为黑。

对正则表达式没有概念的可以看看这：正则表达式30分钟入门教程

 

posted @ 2015-03-29 00:10  AminHuang  Views(3352)  Comments(0)  Edit  收藏  举报