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