编辑

Question

我有很多输入，例如：

<input />
<input />
<input />

和一个用于投放额外输入的按钮

<button>Add Input</button>

问题是，当用户将文本放入输入中并添加时之后再进行其他输入（例如，按Add Input），旧输入中输入的文本就会消失。

JSFiddle ：

<div id="inputs"></div>

<button onclick="document.getElementById('inputs').innerHTML += '<input /><br>'">Add Input</button>

因此，我决定更新<input> value属性。我已经尝试过onchange，但是没有运气。

带有错误和试验的代码非常简单，看起来像：

function change_value(el) {

 document.getElementById('some-id').value = el.value
}

<input id="some-id" value="${this.value}" onchange="change_value(this)" />

对于如何使<input value与用户文本保持最新有关的任何建议，我们将不胜感激。

Answer 1

这取决于您要更新的内容。您可以在下面找到一个代码片段，该代码片段可以在 oninput 上运行并更新 span 的 textContent 。

const input = document.getElementById('some-id')
const display = document.getElementById('updated')

input.addEventListener('input', function(e) {
  display.textContent = this.value

})

<input id="some-id" value="" /><br /><br />
<div>Updated value: <span id="updated"></span></div>

编辑

一个新的代码片段可能会清除一些内容。

const btnAdd = document.getElementById('add')

btnAdd.addEventListener('click', function(e) {
  var input = document.createElement('input');
  input.type = "text";

  document.getElementById('inputs').appendChild(input)
})

<div id="inputs"></div>

<button id="add">Add Input</button>

使用 createElement（）代替 innerHTML 。

Answer 2

尝试像这样使用innerHtml

document.getElementById('some-id').innerHtml instead of value

https://www.w3schools.com/js/js_htmldom_html.asp

Answer 3

实际上，这是不可能的，也许有一些技巧，例如进行任何更改来存储值，并使用新值创建新输入或更改innerHtml，也许可行。

更新<input>值onchange

3 个答案:

编辑