JavaScript中的明文输入

Clear text inputs in JavaScript

本文关键字：输入明文 JavaScript 更新时间：2023-09-26

我正在参加一个名为JavaScript教程的在线课程。大约1小时2分钟后，我们结束了课程的事件部分。最后一个事件是清除任何文本输入。我尽可能仔细地看了视频中的教官代码，就是看不出为什么我的文字不清楚。下面是事件和它们引用的HTML标记。最后一个称为clearInputs的事件是我试图清除输入字段中的文本。教练让它看起来好像应该清除鼠标和键输入。

<!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>

请帮我清理输入。谢谢你！

可以迭代输入并将value设置为空，如下所示:

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>