如何使用 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