时间戳

首页 > 解决方案 > 使用 innerHTML 将文本框插入绝对定位的 div 会导致 Chrome Mobile 出现奇怪的错误

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

问题描述

我有一个带有文本框和一个空 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>

标签： javascripthtmlcssgoogle-chrome

解决方案

如果我正确理解这一点并且您尝试在您<div>的<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>

推荐阅读