Question

我希望在用JavaScript更新后手动编辑我的textarea，但是当我在其上写一些文字时，我写的文本位于已经在textarea中的文本上（写的）由JS）。

所以我在寻找为什么我不能这样做。这是我的代码：

function initTextIA() {
  var txt = document.createElement('textarea');
  txt.style.rows = "5";
  txt.style.cols = "45";
  txt.style.top = "2300px";
  txt.style.left = "250px";
  txt.style.position = "absolute";
  txt.style.background = "none";
  txt.style.color = "green";
  txt.id = "txtIA";
  document.getElementById("cool").appendChild(txt);
}


initTextIA();

var doc = document.getElementById("txtIA")
doc.value += "txtxtxtxt.\n";

<div id="cool"></div>

textarea生成的HTML代码为：

<textarea id="txtIA" style="top: 2300px; left: 250px; position: absolute; background: none; color: green;"></textarea>

Answer 1

从评论中我觉得你的行高属性没有为textarea正确设置。由于您在末尾设置了包含换行符的textarea值：

txtxtxtxt。\ n

新写入的文本应该放在第二行，但它与用JS输入的旧文本重叠。因此，在initTextIA函数中尝试以下内容：

txt.style.lineHeight = "2";

Answer 2

由于提供的原始HTML很少，所以这里有很多假设。我在评论中的所有讨论中感觉到的是，您无法附加文本，然后键入值，然后通过某个按钮继续附加。

我写了一个简单的案例，我已经评论了textarea的定位，因此可以轻松完成测试。我添加了两个按钮但没有错误检查只是为了给出方向。如果这不能解决问题，请告诉我。

function initTextIA() {
            var txt = document.createElement('textarea');
            txt.style.rows = "5";
            txt.style.cols = "45";
            //txt.style.top = "2300px";
            //txt.style.left = "250px";
            //txt.style.position = "absolute";
            txt.style.background = "none";
            txt.style.color = "green";
            txt.id = "txtIA";
            document.getElementById("cool").appendChild(txt);
            document.getElementById('addButton').style = 'display:none';
            document.getElementById('appendButton').style = 'display:block';
            
}

function fillTextIA() {
var doc = document.getElementById("txtIA")
doc.value += "txtxtxtxt.\n";
}

<div>
<button id='addButton' onclick='initTextIA()'>add text area</button>
<button id='appendButton' onclick='fillTextIA()' style='display:none'>append text</button>
</div>
<div id='cool'>
<p>An element.</p>
</div>

无法使用JavaScript编辑textarea

2 个答案: