Question

我正在上一个名为JavaScript Tutorial的在线课程。大约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>

请帮我清除输入。谢谢！

Answer 1

您可以迭代输入并将值设置为空，如下所示：

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>

JavaScript中的明文输入

1 个答案: