码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2015-03-29 00:26:51      阅读:181      评论:0      收藏:0      [点我收藏+]

标签:

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

 

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

标签:

原文地址:http://www.cnblogs.com/AminHuang/p/4375091.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!