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

相關文章

相關標籤/搜索

14-輸入/輸出

紅包項目實戰

PHP 7 新特性

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<