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

时间：2024-01-10 10:44:32

腾讯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分钟入门教程

相关文章