騰訊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分鍾入門教程