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

【问题标题】：Javascript: filling inputs with text without overwriting the text that is already thereJavascript：用文本填充输入而不覆盖已经存在的文本
【发布时间】：2019-07-22 23:15:04
【问题描述】：

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

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

【问题讨论】：

只是一个旁注，如果你知道你永远只想要第一个输入元素，考虑使用document.querySelector('input')

标签： javascript html button input autofill

【解决方案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

【讨论】：

只考虑在输入值后加一个空格，但即使没有它，一切似乎都很好
你肯定不傻——这样的事情会发生。很高兴我能帮上忙！
等一下...我希望它在光标闪烁时向当前输入添加文本。它仅适用于页面上有多个输入时的第一个输入。
恐怕我并没有真正理解这一点。你能具体说明你的问题吗？
啊，明白了！好吧，这些是与最初的问题没有真正关系的两件事。也许你应该提出一个新问题，以免这个问题搞砸。

【解决方案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>

【讨论】：