2016-09-29 41 views
0

我正在參加一個名爲JavaScript Tutorial的在線課程。大約1小時2分鐘,我們正在結束課程的活動部分。最後一個事件是清除任何文本輸入。我儘可能地仔細觀察視頻中的教師代碼,只是看不清爲什麼我的文本不清楚。以下是他們參考的事件和HTML標籤。最後一個名爲clearInputs的事件是我試圖清除輸入字段中的文本。導師看起來好像應該清除鼠標和鍵輸入。JavaScript中的明文輸入

<!doctype html> 
<html lan="en"> 
    <head> 
     <meta charset="utf-8"> 
     <script src="jstut.js"></script> 

     <style type="text/css"> 
      body {font-size: 1.6em;} 
      .hidden {display:none;} 
      .show {display:inLine !important;} 
      button { 
      border: 2px solid black; background: #ESE4E2; 
      font-size: .5em; font-weight: bold; color: black; 
      padding: .8em 2em; 
      margin-top: .4em; 
      } 
     </style> 

    </head> 
    <body> 

     <input type="text" id="randInput" 
     onChange="var dataEntered=document.getElementById('randInput').value; 
     alert('User Typed ' + dataEntered)" 

     <form action="#" id="sampForm"> 
      <input id='charInput' type="text"> 

      <p id="keyData">Key Data Here</p> 

      <input type="submit" value="Submit"> 
      <input type="reset" value="Reset"> 

     </form><br /> 

     <img src="ntt-logo.png" id="logo"> 

     <button id="logoButton" type='text'>Get Logo</button> 

     <input id='mouseInput' type='text' size="30"><br /> 

     <button id="clearInputs">Clear Inputs</button> 

     <script> 

     // event.which returns the key or mouse button clicked 

     function getChar(event){ 
      if(event.which == null){ 
       return String.fromCharCode(event.keyCode); // for Internet Explorer 
      } else if (event.which != 0 && event.charCode != 0){ 
       return String.fromCharCode(event.which); // for all other browsers 
      } else { 
       return null; // if user uses a key code that cannot be displayed on the screen 
      } 
     } 

     document.getElementById('charInput').onkeypress = 
      function(event){ 
      var char = getChar(event || window.event) 
      if(!char) return false; // us user clicked something that doesn't work 

      // use innerHTML for html tag element id 
      // use value for input element 

      document.getElementById('keyData').innerHTML = char + " was clicked"; 
      return true; 
      } 

      // .onfocus is when a field was clicked 
      document.getElementById('charInput').onfocus = function(event){ 
      document.getElementById('keyData').innerHTML = "Input Gained Focus"; 
      } 

      document.getElementById('charInput').onselect = function(event){ 
      document.getElementById('keyData').innerHTML = "Text Selected"; 
      } 

      document.getElementById('logoButton').onclick = function(event){ 
      document.getElementById('logo').className = "show"; 
      } 

      document.getElementById('logo').onclick = function(event){ 
      document.getElementById('logo').className = "hidden"; 
      }  

      document.getElementById('logo').onmouseover = function(event){ 
      document.getElementById('logo').src = "ntt-logo-horz.png"; 
      document.getElementById('mouseInput').value = "Mouse Over Image"; 
      } 

      document.getElementById('logo').onmouseout = function(event){ 
      document.getElementById('logo').src = "ntt-logo.png"; 
      document.getElementById('mouseInput').value = "Back to Original Image"; 
      } 

      document.getElementById('clearInputs').onclick = function(event){ 
      var inputElements = document.getElementsByTagName('input'); 

      for(var i = 0; i < inputElements.length; i++){ 
       if(inputElements[i].type == "text"){ 
        inputElements[i].value == ""; 
       } 
      } 
      } 
     </script> 
    </body> 
</html> 

請幫我清除我的輸入。謝謝!

+0

它僅清除文本輸入,因爲它有'如果(inputElements [I] .TYPE == 「text」)' – Barmar

+0

@Barmar nope .....一行另一行 – epascarello

+1

'inputElements [i] .value ==「」;'你沒有設置值,因爲你有'==' – epascarello

回答

2

可以重複輸入和設定值作爲空的,就像這樣:

document.getElementById('clearInputs').onclick = function(event){ 
 
    var inputs = document.getElementsByTagName('input'); 
 
    for (var i=0 ; i < inputs.length ; i++){ 
 
    if (inputs[i].type == "text"){ 
 
     inputs[i].value = ""; 
 
     } 
 
    } 
 
}
<input type="text"/> 
 
<br/> 
 
<input type="text"/> 
 
<br/> 
 
<button id="clearInputs">Clear</button>

+1

有沒有這樣的事情''。 – Barmar

+0

@Barmar發表了關於將'==「」''更改爲'=「」'的註釋,這有助於不必刪除'if'語句。我嘗試了你的方法,它也工作得很好。謝謝@LucasCosta –

+0

Thansk觀察@Barmar,我編輯代碼 –