使用純javascript檢測更改的輸入文本框

如果輸入文本框更改（用戶已停止鍵入）使用javascript，以便我可以驗證窗體並顯示錯誤消息（如果需要），我試圖分離。我知道它可以使用jQuery完成，但我希望在純JavaScript中做到這一點。使用純javascript檢測更改的輸入文本框

http://jsfiddle.net/xstqLkz4/2/

上面的鏈接證明它使用jQuery

我沒有太多的代碼。我不知道從哪裏開始。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>javascript validate</title> 
    <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'> 
    <script src="domready.js"></script> 
    <script> 
    DomReady.ready(function() { 
     (function() { 
      var Username = document.getElementById("Username"); 
      var Password = document.getElementById("Password"); 
      var DOB = document.getElementById("DOB"); 
      var Email = document.getElementById("Email"); 
      var Country = document.getElementById("Country"); 

      if (Username.length <= 5){ 
       alert("Less then 5"); 
      } 

     })(); 
    }); 
    </script> 
    <style> 
     body{ 
      font-family: 'Lato', sans-serif; 
      position: absolute; 
     } 

     label{ 
      font-size: 1.2em; 
      margin-right: 5px; 
     } 

     input[type='text'], input[type='password']{ 
      border: none; 
      padding: 7px; 
      background-color: rgba(242, 240, 240, 1); 
      font-family: 'Lato', sans-serif; 
      font-size: 0.85em; 
      font-weight: 100; 
     } 

     input[type='password'], input[type='text'], input[type='submit']{ 
      margin-top: 18px; 
     } 

     input[type='password']{ 
      margin-left: 32px; 
     } 

     input[type='submit']{ 
      padding: 10px 119px; 
      background-color: #F2F0F0; 
      border: medium none; 
      font-family: "Lato",sans-serif; 
      margin-top: 24px; 
      font-size: 1.4em; 
      font-weight: 500; 
     } 

     #wrp{ 
      width: 800px; 
      position: relative; 
      left: 438px; 
      top: 32px; 
     } 

     #Username{ 
      margin-left: 25px; 
     } 

     #DOB{ 
      margin-left: 3px; 
     } 

     #Email{ 
      margin-left: 70px; 
     } 

     #Country{ 
      margin-left: 43px; 
     } 

     .errortxt{ 
      color: rgba(206, 145, 145, 1); 
     } 

     .error{ 
      background-color: rgba(242, 228, 228, 1); 
     } 

    </style> 
</head> 
<body> 
    <div id="wrp"> 
     <form action=""> 
      <div> 
       <label for="Username">Username</label> 
       <input type="text" id="Username"> 
      </div> 
      <div> 
       <label for="Password">Password</label> 
       <input type="password" id="Password"> 
      </div> 
      <div> 
       <label for="DOB">Date of birth</label> 
       <input type="text" id="DOB"> 
      </div> 
      <div> 
       <label for="Gender">Gender</label> 
       <div> 
        <label for="Male">Male</label> 
        <input type="radio"> 

        <label for="Female">Female</label> 
        <input type="radio"> 
       </div> 
      </div> 
      <div> 
       <label for="Email">Email</label> 
       <input type="text" id="Email"> 
      </div> 
      <div> 
       <label for="Country">Country</label> 
       <input type="text" id="Country"> 
      </div> 
      <div> 
       <input type="submit" value="Submit"> 
      </div> 
     </form> 
    </div> 
</body> 
</html>

來源

2014-12-03 Himanshu

jsFiddle看起來非常直截了當（雖然時間可能有點短）。

此代碼...

$("#input").on("input" ...

...似乎表明，它正在對單個<input>標籤上運行。您可能希望將其轉移到一個班級，並在發生火災時執行驗證。

來源

2014-12-03 19:20:42 rfornal

我希望沒有jQuery。 – Himanshu 2014-12-03 19:24:31

在這裏看到答案** http://stackoverflow.com/questions/19655189/javascript-click-event-listener-on-class** – rfornal 2014-12-07 19:08:24

謝謝，這解決了我的問題:) – Himanshu 2014-12-07 19:13:47

使用純javascript檢測更改的輸入文本框

回答

相關問題