SVG-based text input field

Question

Has anyone seen any javascript implementation of a text input field besides http://www.carto.net/papers/svg/gui/textbox/ ?

Answer 1

This is for MS Internet Explorer, not tested in any other browser.

As mentioned in another comment, up to IE11 does not support foreignObject. Instead, use the contentEditable attribute.

Plain SVG example

D3.js example with data binding

Here we listen for key events to write the text back to the data.

selection.
  .append("text")
    .attr("contentEditable", true)
    .text(function(d) { return d.text })
    .on("keyup", function(d) { d.text = d3.select(this).text(); });

Note: If nodes are dynamically generated like with d3.js, you must capitalize contentEditablelike such (this took me some time)!

Note: Do not style your text with pointer-events: None, for then you cannot interact with the text anymore, regardless of the contentEditable setting.