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

Question

我有一个带有文本框和一个空 div 的 html 文档，在单击按钮时会插入一个新的文本框。当我将一个文本框插入到具有绝对位置的 div 中时，另一个文本框就会消失。我已经能够用最少的代码重现这个错误。我发现如果两个文本框值属性都不为空并且 div 具有绝对位置或固定位置，则会发生此错误。如果我将任何文本框的 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>