web-dev-qa-db-ja.com

SVGベースのテキスト入力フィールド

http://www.carto.net/papers/svg/gui/textbox/ 以外のテキスト入力フィールドのjavascript実装を見た人はいますか？

javascriptuser-interfacesvg
26
Yurii Rashkovskii

foreignObjectという興味深いSVGノードがあり、SVGコード内にHTMLやフラッシュなどを配置できます。以下を試してください：

<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で動作します。

26
Ricardo Cruz

これは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のようにノードが動的に生成される場合、must大文字にするcontentEditablelike（これには少し時間がかかりました）！

注：pointer-events: Noneを使用してテキストのスタイルを設定しないでください。コンテンツ編集可能設定に関係なく、テキストを操作できなくなります。

8
Wolfgang Kuehn

私が取り組んでいるプロジェクトのためにこれを探してきました。適切なものが見つからなかったため、独自のソリューションをコーディングしています。他の誰かが同じことをする必要がないように、それで十分だと思います。 http://engelfrost.github.io/svg-input -elements /

5
Josef Engelfrost

私は another one を見てきましたが、SVG Tiny 1.2の 'editable'属性 のサポートが必要であることに注意してください...その例では、JavaScriptの1行です。 Opera で試してください。

3
Erik Dahlström