html textbox not working in SVG foreignObject

Question

I'm working on a flowchart web application using Angular-JS and svg:

everything works fine but there is an strange problem: HTML elements used in SVG (which are in fact rendered inside the foreignObject tag) don't work. For instance text box cannot be edited at all and combo box items cannot be selected. Click on the title (نام برگه), it will then be changed into a textbox, but you cannot write anything in this textbox, what is going wrong?

here is my foreignObject tag code:

<foreignObject x="50" y="50" width="350" height="200" style="z-

index:2000;" >

<script>
    var nodeIndex = 0;

    function Switch(index) {
        var name = "div" + index;
        div1.style.display = "none";
        div2.style.display = "none";
        div3.style.display = "none";

        tab1.style.backgroundColor = "lightgray";
        tab2.style.backgroundColor = "lightgray";
        tab3.style.backgroundColor = "lightgray";

        document.getElementById(name).style.display = "";
        name = "tab" + index;
        document.getElementById(name).style.backgroundColor = "lightgreen";
    }

    function Collapse() {
        if (imgCollapse.src.indexOf("visible.png")!=-1) {
            imgCollapse.src = "flowchart/collapsed.png";
            divBody.style.display = "none";
        }
        else {
            imgCollapse.src = "flowchart/visible.png";
            divBody.style.display = "";
        }
    }

    function ChangeTitleLabel(id) {
        var lbl = document.getElementById(id);
        var txt = document.getElementById(id.replace("lbl", "txt"));
        lbl.style.display = "none";
        txt.style.display = "";
        txt.value = lbl.innerHTML;
    }

    function ChangeTitleText(id) {
        var txt = document.getElementById(id);
        var lbl = document.getElementById(id.replace("txt", "lbl"));
        lbl.style.display = "";
        txt.style.display = "none";
        lbl.innerHTML = txt.value;
    }

    Init();
    function Init() {

        var titlebars = document.getElementsByClassName("titlebar");
        nodeIndex = titlebars.length;
        var tmpTitleBar = document.getElementById('divTitleBar');
        tmpTitleBar.id = "divTitleBar" + nodeIndex;
        var iconid = "imgIcon" + nodeIndex;
        var lbltileid = "lblTitle" + nodeIndex;
        var txttiteid = "txtTitle" + nodeIndex;

        document.getElementById("divTitleBar" + nodeIndex).innerHTML += "<span id='" + lbltileid + "' style='cursor:hand; cursor:pointer;' onclick='ChangeTitleLabel(this.id)' >نام برگه</span>";
        document.getElementById("divTitleBar" + nodeIndex).innerHTML += "<input id='" + txttiteid + "' value='نام برگه' type='text' style='display:none; z-index:2000; font-family:Tahoma;' onclick='ChangeTitleText(this.id)'  />";

        document.getElementById("divTitleBar" + nodeIndex).innerHTML += "<img src='flowchart/icon.png' style='cursor:hand; cursor:pointer; height:22px; float:left;' id='" + iconid + "' />";
    }

</script>
    <meta http-equiv="content-type" content="application/xhtml+xml; charset=utf-8" /> 
        <body xmlns="http://www.w3.org/1999/xhtml" >
            <div style="width:350px;   direction:rtl; font-family:Tahoma; font-size:small;">
                <div style="width:350px; height:22px; background-color:lightgreen;  direction:rtl; border-style:solid; border-color:black; border-width:1px;" class="titlebar" id="divTitleBar">
                    <img src="flowchart/visible.png" style="cursor:hand; cursor:pointer; height:22px;" id="imgCollapse" onclick="Collapse()" />


                    </div>
<div style="width:350px; height:200px; font-family:Tahoma; direction:rtl; border-style:solid; border-width:1px;" id="divBody">
</div>
                </div>
        </body>
    </foreignObject>

collapsar collapsar · Accepted Answer · 2015-02-16T08:21:01

There are several issues:

Init()

You call your Init routine before the dom has been created. Instead of calling it inside the script section, register an onload handler with the svg element (not contained in your code):

Note that onload must be all-lowercase and that the handler cannot be registered with the body element inside the foreignObject ( which has been the error in the previous version of this answer).
script tag

The script tag needs to be pulled out of the foreignObject and inserted as a child of the svg element.
function Collapse

You do not define the variable divBody. Change the function Collapse to:

function Collapse() { var divBody = document.getElementById('divBody'); //... }
function ChangeTitleLabel/Text

You use the event handlers incorrectly. Specify their call by

onclick='ChangeTitleLabel(\""+lbltileid+"\")'
onclick='ChangeTitleText(\""+txttiteid+"\")'

(You are generating the lexicalisation of the call inside a string)

meta

You do not need the meta element.

html textbox not working in SVG foreignObject

1 Answers