异物中的文本区域

Textarea in a foreignObject

本文关键字：区域 文本 异物      更新时间：2023-09-26

我在输入使用 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);

它将我需要的东西(textarea(生成到画布中，但阻止写入/编辑。 怎么了？我从以下位置重用了该代码：https://developer.mozilla.org/en-US/docs/HTML/Canvas/Drawing_DOM_objects_into_a_canvas

你得到了你所做的一切：你在canvas上drawn了一个文本区域。

如果不手动管理每件事，就不可能像Textarea DOM Element一样使其具有交互性。

相关文章：