基于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></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

我见过另一个，请注意，它需要支持SVG Tiny 1.2 中的“可编辑”属性...它绝对更加原生，因为该示例中没有一行 javascript。在Opera中尝试一下。