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

时间 2019-11-12

标签 javascript 实现控制一个文本只能输入正整数不符合条件所有字体栏目 JavaScript 繁體版

原文原文链接

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

代码：html

<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长什么样了:(前端

顺便复习一下。java

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

这二者也仍是有区别的：浏览器

window.onload

$(document).ready()

执行时机

页面全部元素（包括图片及引用文件）加载完后执行

页面内全部HTML DOM， CSS DOM加载完就会执行。函数

若是想要全部元素（包括图片及引用文件）加载完再注册事件能够用$(window).load(function);等价于window.onload()this

可编写个数

只能一个。后写的会覆盖前面写的。

能够同时有多个。

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

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