0

我有一堆输入，例如：

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

和一个广告额外输入的按钮

<button>Add Input</button>

问题在于，当用户将文本放入输入中并随后添加其他输入（即按Add Input）时，旧输入中的输入文本会消失。

JSF中：

<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与用户文本保持同步的任何建议。

4

3 回答 3

2

这取决于您要更新的内容。您可以在下面找到一个片段，它适用于输入并更新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。

于 2019-08-21T13:29:52.210 回答
0

尝试像这样使用innerHtml

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

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

于 2019-08-21T13:33:10.317 回答
0

实际上，这种方式是不可能的，也许有一些技巧，比如使用任何更改存储值并使用新值创建新输入或更改 innerHtml，也许它可以工作。

于 2019-08-21T13:37:46.307 回答