Javascript：使用文本填充输入而不覆盖已存在的文本

Question

我正在尝试创建一个按钮，在单击时将文本添加到输入，但不会添加文本，而是覆盖已在其中键入的文本。我需要帮助。这是代码：

<script>
  function autoFill() {
    var input = document.getElementsByTagName("INPUT")[0]

    input.value = "text overwrites instead of adding";
  }
</script>

<input type="input"></input>
<button type="button" onclick="autoFill()">fill it!</button>

Answer 1

我应该这么简单：

input.value += "text overwrites instead of adding";

+ =运算符向变量添加内容，而=赋予新值。

想象一下：

var a=8;
a+=4;
console.log(a);

痕迹12

如果我们这样做：

var a=8;
a=4;
console.log(a);

痕迹4

Answer 2

您需要获取存在的输入值 - 将新内容附加到其中，然后将新值传递回输入。

function autoFill() {
    var input = document.getElementsByTagName("INPUT")[0];
    var val = input.value;
    var newContent = "new content";
    input.value = val + " " +  newContent;
  }

<input type="text" value="Sample text">
<button type="button" onclick="autoFill()">fill it!</button>