基于SVG的文本输入字段

Question

除了http://www.carto.net/papers/svg/gui/textbox/之外，有没有人看过任何文本输入字段的javascript实现？

Answer 1

有一个名为foreignObject的有趣SVG节点，它允许您在SVG代码中放置HTML，flash等。请尝试以下方法：

<svg width="100%" height="500" xmlns="http://www.w3.org/2000/svg>
  <foreignObject x="10" y="10" width="100" height="150">
      <div xmlns="http://www.w3.org/1999/xhtml">
      <input></input>
          </div>
  </foreignObject>
</svg>

编辑：添加了xmlns，因此适用于IE。

Answer 2

这适用于MS Internet Explorer，未在任何其他浏览器中测试过。

如另一条评论所述，IE11不支持foreignObject。 而是使用contentEditable属性。

普通SVG示例

<svg width="100" height="100" >
    <g transform="translate(40,40)">
        <text contentEditable="true">foo</text>
    </g>
</svg>

D3.js数据绑定示例

在这里，我们监听关键事件，将文本写回数据。

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

注意：如果节点是动态生成的，就像d3.js一样，必须大写contentEditable这样（这花了我一些时间）！

注意：请勿使用pointer-events: None设置文字样式，因为无论contentEditable设置如何，您都无法再与文本进行互动。

Answer 3

我一直在为我正在进行的项目寻找这个。我们找不到合适的东西，所以我们编写自己的解决方案，我希望它足够好，以便其他人不必这样做：http://engelfrost.github.io/svg-input-elements/

Answer 4

我见过another one，请注意它需要支持来自SVG Tiny 1.2的'editable' attribute ...在这个例子中没有一行javascript的意义上它肯定更具原生性。在Opera中尝试一下。