Textarea in foreignObject

我在使用svg創建textarea時遇到了一些問題。Textarea in foreignObject

下面是代碼：

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

來源

2013-10-10 Daniel Kliemczak

你讓你究竟做了什麼：你drawn在canvas一個textarea。

不可能使它像Textarea DOM Element那樣交互，而無需手動管理每件事物。

來源

2013-10-10 20:35:30

所以......我能做什麼？我真的需要在一個畫布內做一個文本區域... –

謝謝chumkiu 所以...我能做什麼？我真的需要在畫布內創建文本區域... –

您可以創建常規textarea並在畫布上設置位置。請參閱http://stackoverflow.com/questions/13815447/add-a-textarea-inside-the-canvas-at-the-current-mouse-position –

回答

相關問題