CODEWITHSUNDEEP
javascripthtmlsvgtextareaforeignobject
Nikhil
Nikhil

Reputation: 23

Textarea not working within ForeignObject in a SVG

I'm trying to add a textarea to an SVG. The SVG contains a group container g and I'm appending a foreignObject containing a div which contains a textarea to this group container. The textarea is visible and clicking on the textarea does fire a click event. However, the textarea is not editable. It does not show the cursor to type text at all. I have tried adding contentEditable to both the div and the textarea as well, but that did not work. Here is the code I'm using:

                var myforeign = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')
                var textdiv = document.createElement("div");
                var input = document.createElement("textarea");
                input.setAttribute("cols", 5000);
                input.setAttribute("rows", 500);
                input.setAttribute("id", "inputtext");
                textdiv.setAttribute("contentEditable", "true");
                textdiv.setAttribute("width", "auto");
                myforeign.setAttribute("width", "100%");
                myforeign.setAttribute("height", "100%");
                textdiv.appendChild(input); 
                myforeign.classList.add("foreign"); //to make div fit text
                textdiv.classList.add("insideforeign"); //to make div fit text
                myforeign.setAttributeNS(null, "transform", "translate(18000 18000)");
                myforeign.appendChild(textdiv);
                group = document.getElementById(this.id);
                group.appendChild(myforeign);
                input.addEventListener("input", this.clickedInput);

Need help to figure out why I cannot write text within the textarea.

Upvotes: 0

Views: 130

Answers (0)

Related Questions