Javascript text外来对象中的区域

在使用svg创建的

textarea

中键入内容时遇到一些问题

代码如下：

var data = "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
             "<foreignObject width='100%' height='100%'>" +
               "<div xmlns='http://www.w3.org/1999/xhtml' style='font-size:40px;position:fixed;top:100px;left:50px;'>" +
               "<textarea cols='30' rows='10'></textarea>" +
                 //"<em>I</em> like <span style='color:white; text-shadow:0 0 2px blue;'>cheese</span>" +
               "</div>" +
             "</foreignObject>" +
           "</svg>";
            var DOMURL = self.URL || self.webkitURL || self;
            var img = new Image();
            var svg = new Blob([data], { type: "image/svg+xml;charset=utf-8" });
            var url = DOMURL.createObjectURL(svg);
            img.onload = function () {
                ctx.drawImage(img, 0, 0);
                DOMURL.revokeObjectURL(url);
            };
            img.src = url;

            var doc = document.implementation.createHTMLDocument("");
            doc.write(html);
            doc.documentElement.setAttribute("xmlns", doc.documentElement.namespaceURI);
            var html = (new XMLSerializer).serializeToString(doc);

var data=“”+
"" +
"" +
"" +
//“我喜欢奶酪”+
"" +
"" +
"";
var DOMURL=self.URL | | self.webkitURL | | self；
var img=新图像（）；
var svg=newblob（[data]，{type:“image/svg+xml；charset=utf-8”}）；
var url=DOMURL.createObjectURL（svg）；
img.onload=函数（）{
ctx.drawImage（img，0,0）；
revokeObjectURL（url）；
};
img.src=url；
var doc=document.implementation.createHTMLDocument（“”）；
doc.write（html）；
doc.documentElement.setAttribute（“xmlns”，doc.documentElement.namespaceURI）；
var html=（新的XMLSerializer）.serializeToString（doc）；

它在画布中生成我需要的

文本区域

，但阻止写入/编辑。发生了什么？ 我重用了以下代码：

---

您完全完成了您所做的：您在

画布上绘制了一个文本区域

如果不手动管理每件事，就无法使其像
textareadom元素那样交互。
谢谢chumkiu，所以。。。我能做什么？我真的需要在画布中创建一个文本区域…您可以创建一个常规文本区域并在画布上设置位置。看见