Question

我正在尝试使用Java脚本重设输入字段，但是它无法按照我想要的方式工作。我试图理解为什么它以某种方式而不是另一种方式起作用。您能否解释一下原因，并在可能的情况下提供任何提示。谢谢。

我要重置的输入文本字段：

<input type="text" id="textInput" class="inp">

我定义了一个这样的按钮：

<button id="resetButton">Reset</button>

我在“重置”按钮上创建了一个事件监听器，并按如下所示使用它。

var rButton=document.getElementById("resetButton");

rButton.addEventListener("click", function() {
    var inputTextValue=document.getElementById("textInput").value;
    inputTextValue="";
});

这是我从输入文本中获取值的JS代码：

 var inputTextValue=document.getElementById("textInput").value;

要重置该值，我只是将其分配给空字符串：

inputTextValue="";

这段代码不起作用，但是当我尝试获取像这样的输入文本的引用时-

var inputText=document.getElementById("textInput");

并尝试像这样重置值，它可以正常工作-

inputText.value =“”;

所以，我试图理解，这两种方式有什么区别，我在做什么错。

Answer 1

当您将value属性分配给变量时，这正是您要执行的操作。您只需分配值，不创建引用-将整个元素设置为变量并更新value属性，或立即更新value属性：

document.getElementById("textInput").value = "";

或者：

var input = document.getElementById("textInput");
input.value = "";

Answer 2

您要将输入字段的当前值复制到inputTextValue字符串中，然后将该副本替换为空字符串。这意味着您实际上并没有更改输入字段。

尝试

document.getElementById("textInput").value = "";

或

 var input = document.getElementById("textInput");
 input.value = "";

相反。

Answer 3

通过这种方式可以重置或选择。

$(document).on("click", "#resetButton", function() {
    var textInputValue = $("#textInput").val(); // get value
    $("#textInput").val(""); // or reset value
});

或

var input = document.getElementById("textInput");
var resetButton = document.getElementById("resetButton");

resetButton.addEventListener("click", function() {
    input.val(); // get value
    input.val(""); // or reset value
});

编辑：我还没有看到Javascript标签。抱歉。：）

无法使用Vanilla Javascript重置输入的文本字段

3 个答案: