基于 SVG 的文本输入字段答案

【问题标题】：SVG-based text input field基于 SVG 的文本输入字段
【发布时间】：2019-01-07 19:35:11
【问题描述】：

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

【问题讨论】：

为什么？那个有什么问题？编辑尝试后，我收回了这个问题。它有很多缺陷，包括完全没有快捷键、bidi 和不完善的键盘选择。
您在 2010 年问过这个问题。现在是 2014 年。此时 SVG 中是否有直接的功能？否则，我希望 SVG 文本有可能在不久的将来接受用户输入。这将非常有帮助。我的意思是这可能只是在旅途中访问正确元素和节点的 xml 编辑器的问题，不是吗？
SVG 现在允许通过 foreignObject 编写 HTML 代码，其中可以包含输入框等内容。 Internet Explorer 不支持此功能。请参阅下面的答案。
问题中给出的链接已损坏。

【解决方案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></input>
          </div>
  </foreignObject>
</svg>

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

【讨论】：

@MarkKuczmarski，我忘了添加xmlns，其中is apparently 是IE 所必需的。请问现在可以测试了吗？（我不使用 Windows。）

【解决方案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 一样动态生成节点，您必须大写 contentEditablelike 这样（这花了我一些时间）！

注意：不要使用 pointer-events: None 设置文本样式，因为这样无论 contentEditable 设置如何，您都无法再与文本交互。

【讨论】：

你能发个小提琴吗
这对我也不起作用。我不知道出了什么问题。小提琴可能真的很有用。
caniuse.com/#feat=contenteditable "使任何 HTML 元素可编辑的方法。"请注意该引用中的 HTML。

【解决方案3】：

我见过another one，请注意，它需要支持来自SVG Tiny 1.2 的'editable' attribute...从该示例中没有一行javascript 的意义上说，它肯定更原生。在Opera 中试用。

【讨论】：

我对editable属性很熟悉。太糟糕了 1.2 不是一个真正的选择。还是谢谢！