使用 innerHTML 将文本框插入绝对定位的 div 会导致 Chrome Mobile 出现奇怪的错误

Question

我有一个 html 文档，其中包含一个文本框和一个空 div，单击按钮时将插入一个新文本框。 当我将一个文本框插入绝对 position 的 div 中时，另一个文本框消失了。 我已经能够用最少的代码重现这个错误。 我发现如果两个文本框值属性都不为空并且 div 具有 position 绝对值或固定值，则会出现此错误。 如果我将任何文本框的 value 属性设置为空，该错误就会出人意料地解决。 这发生在 android chrome 上，但不在桌面上。 我究竟做错了什么？

https://jsfiddle.net/z34e9wah/

 function newTextbox(){ document.getElementById("myDiv").innerHTML = '<input type="text" value="textbox2">'; }

 #myDiv{ border:1px solid #000; position:absolute; width:200px; height:100px; top:50px; left:0px; }

 <input type="text" value="textbox1"> <div id="myDiv"></div> <button onclick="newTextbox()">Create new textbox</button>

Answer 1

如果我正确理解这一点并且您尝试在<div>内生成多个输入框，那么您当前每次设置 innerHTML 时都会覆盖<div>的内容。 您可以将<div>的当前内容与每个新文本字段连接起来，如下所示。

 let i = 1; function newTextbox(){ let currentHTML = document.getElementById("myDiv").innerHTML; i++; document.getElementById("myDiv").innerHTML = `${currentHTML}<input type="text" value="textbox${i}" /><br />`; }

 #myDiv{ border:1px solid #000; position:absolute; width:200px; height:100px; top:50px; left:0px; overflow: auto; }

 <input type="text" value="textbox1" /> <div id="myDiv"></div> <button onclick="newTextbox()">Create new textbox</button>