单击事件后清除输入值

Question

我在 Javascript 事件中遇到了一些问题。单击后我需要一些代码来清除输入值。输入被填充并列在 "myTable" 行后，输入字段变为空白。

这是我的代码

<main>
<table>
    <tr>
        <td><input type="text" id="gds"></td>
        <td><input type="text" id="prc"></td>
        <td><input type="button" class="button" value="   + Add   " onclick="addField();"></td>
    </tr>
</table>
<table id="myTable">
</table>
<script type="text/javascript">
function addField (argument) {
        var myTable = document.getElementById("myTable");
        var currentIndex = myTable.rows.length;
        var currentRow = myTable.insertRow(-1);

        var x = document.getElementById("gds").value;
        var y = document.getElementById("prc").value;

        var NumBox = document.createElement("input");
        NumBox.setAttribute("name", "nmbr[]" + currentIndex);
        NumBox.setAttribute("value", 1 + currentIndex);
        NumBox.setAttribute("size", "2");

        var KeyBox = document.createElement("input");
        KeyBox.setAttribute("name", "goods[]");
        KeyBox.setAttribute("value", x);

        var priceBox = document.createElement("input");
        priceBox.setAttribute("name", "price[]");
        priceBox.setAttribute("value", y);

        var currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(NumBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(KeyBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(priceBox);

        currentCell = currentRow.insertCell(-1);
        currentCell.appendChild(addRowBox);

        var input1 = document.getElementById("gds");
        input1.reset();

        var input2 = document.getElementById("prc");
        input2.reset();
    }
</script>
</main>

Answer 1

要清除输入元素，只需将其值设置为空字符串即可。

document.getElementById("gds").value = "";
document.getElementById("prc").value = "";

Answer 2

您的代码在这一行抛出错误：

currentCell.appendChild(addRowBox);

因为 addRowBox 是未定义的（在我看来是错误地喜欢它）。此外，您不使用 .reset() 来清除输入值，而只是将其值设置为空字符串。

这可能就是您想要的：

    currentCell = currentRow.insertCell(-1);
    //currentCell.appendChild(addRowBox);

    var input1 = document.getElementById("gds");
    input1.value = '';

    var input2 = document.getElementById("prc");
    input2.value = '';

Answer 3

如果您想在单击事件后清除输入值，最基本的解决方案是使用 addEventListener。下面是用于此目的的通用代码。

document.querySelector("cssSelector").addEventListener('click', function (event) {
   //yourActionAfterClick
   setTimeout(function(){ 
      //yourDefaultAction 
   }, 3000);
}, false);

单击事件后清除输入值

Clear the Input value after Click Event

javascript

event-handling

dom-events