如何使用 innerHTML 获取输入字段的当前值？

Question

我想获得可编辑div的 HTML。 它包含文本和<input>标记。 看：

 document.body.addEventListener('click', () => { console.log(document.getElementById('content').innerHTML); })

 body { height: 100vh; }

 <div id="content" contentEditable="true"> I want <input type="number" value="3"> candies. </div>

我的问题是<input type="number" value="3"> 。 当我更新输入字段的值时，我仍然得到默认值。

那么如何获取输入字段的实时值呢？

我不是在寻找输入字段的值。 输出应该是作为字符串的div#content的完整内容。

Answer 1

更改输入的值不会影响 HTML 中的value属性，因为它用于其默认值，而不是当前值。

您需要将输入的值合并到 DIV 的innerHTML中以获得所需的结果。

 document.body.addEventListener('click', () => { let html = document.getElementById("content").innerHTML; let value = document.getElementById('input').value; new_html = html.replace(/value="\d+"/, `value="${value}"`); console.log(new_html); })

 body { height: 100vh; }

 <div id="content" contentEditable="true"> I want <input type="number" value="3" id="input"> candies. </div>

Answer 2

该值不是 HTML 的一部分。 它是 DOM 上的实时属性。 您需要获取实际的<input>元素并观察其value属性。

代替getElementById ，使用querySelector ，它采用更健壮的选择器来识别目标元素。 在这种情况下，目标元素是#content元素内的<input> 。 例如：

 document.body.addEventListener('click', () => { console.log(document.querySelector('#content input').value); })

 body { height: 100vh; }

 <div id="content" contentEditable="true"> I want <input type="number" value="3"> candies. </div>

Answer 3

就像@Barmar 所说的，该属性不会只更新内部 DOM 属性。

但是您可以像这样手动更新它：

 document.querySelector('input').addEventListener('input', (e) => { e.target.setAttribute('value', e.target.value); }); document.body.addEventListener('click', () => { console.log(document.getElementById('content').innerHTML); })

 body { height: 100vh; }

 <div id="content" contentEditable="true"> I want <input type="number" value="3"> candies. </div>

Answer 4

我不明白为什么你不能在你的输入元素中添加另一个 id 标签，比如<input id="contentInput" type="number" value="3">

然后使用此 ID 获取内部 HTML