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