用javascript创建一个textarea

Posted 2023-05-07

【中文标题】用javascript创建一个textarea

【英文标题】：creating a textarea with javascript

【发布时间】：2011-11-14 16:45:43

【问题描述】：

我正在尝试在 id 为“body”的 div 中创建一个文本区域。我使用 onClick 事件调用该函数，但是当我单击它时，创建的所有内容都是 [object htmlTextAreaElement]。我不太确定如何让它发挥作用。

function opentextarea() 
var input = document.createElement('TEXTAREA');
input.setAttribute('name', 'post');
input.setAttribute('maxlength', 5000);
input.setAttribute('cols',80);
input.setAttribute('rows', 40);
var button = document.createElement('BUTTON');
document.getElementById("body").innerHTML=input, button;

【参考方案1】：

var div = document.getElementById("yourDivElement");
var input = document.createElement("textarea");
var button = document.createElement("button");
input.name = "post";
input.maxLength = "5000";
input.cols = "80";
input.rows = "40";
div.appendChild(input); //appendChild
div.appendChild(button);

如果您不需要访问特定的 DOM 函数，我建议使用 innerHTML（因为它通常更快且不易受内存泄漏的影响）。不要忘记正确处理引号。为了保持代码可读性，您可以用加号分隔多行：

document.getElementById("body").innerHTML =
   '<textarea maxlength="5000" cols="80" rows="40"></textarea>' + 
   '<button></button>"':

如果要替换内容，只需在使用appendChild 方法之前使用div.innerHTML = "";。

【参考方案2】：

你最好直接分配属性，我记得 IE 遇到了setAttribute 的问题。代码可以改成这样来实现你想要的：

function opentextarea() 
    var input = document.createElement('textarea');
    input.name = 'post';
    input.maxLength = 5000;
    input.cols = 80;
    input.rows = 40;
    input.className = 'myCustomTextarea';
    var button = document.createElement('button');
    var oBody = document.getElementById("body");
    while (oBody.childNodes.length > 0) 
        oBody.removeChild(oBody.childNodes[0]);
    
    oBody.appendChild(input);
    oBody.appendChild(button);
 

.myCustomTextarea  color: red; font-weight: bold; 

<div id="body">hello I will be replaced</div>
<button type="button" onclick="opentextarea();">Open</button>

顺便说一句，textarea 没有 maxlength 来限制你必须使用 javascript 的字符，例如：How to impose maxlength on textArea in HTML using JavaScript

【讨论】：

实时测试用例太棒了！谢谢

干杯 @Ibrahim 很高兴看到它在四年后仍然有用！现在将其嵌入为堆栈片段，使其更加出色。 :-)

嘿嘿酷：P 另外，你能告诉我，我如何为创建的textarea 分配一个类？

【参考方案3】：

试试

document.getElementById("body").appendChild(input);
document.getElementById("body").appendChild(button);

【讨论】：

好吧，它在内容下方添加了它，但我需要它来替换内容。这就是为什么我让 .innerHTML 到达某个地方的原因。

在第一个appendChild()之前添加div.innerHTML = "";