基于SVG的文本输入字段

Question

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

Answer 1

有一个有趣的 SVG 节点，名为

foreignObject

，它允许您在 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>
    </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

我已经看到了另一个，请注意，它需要支持 SVG Tiny 1.2 中的 'editable' 属性...它绝对更加原生，因为该示例中没有一行 javascript。在Opera中尝试一下。