1

次のようなさまざまなインデントを持つアイテムのリストがあります。

  • リスト項目 1
    • リスト項目 2
      • リスト項目 3

contentEditableユーザーがリスト項目をクリックするとオンになります。ここで、ユーザーが矢印キーを押すと、キャレットの x 位置を維持しながら、upキャレット/単語カーソルをから移動したいと思います。List item 3List item 2

これを図で表すと、

intial caret pos:

  • リスト項目 2
    • 李| 最初の項目 3

final caret pos after user presses up arrow. x offset remains same despite the difference in indent levels:

  • リスト項目| m 2
    • リスト項目 3

目的は、矢印キーを使用して行間を移動するとキャレット オフセットが保持される、複数行のテキスト領域の動作をシミュレートすることです。この動作は、Google タスクのリスト アイテム間を移動するときにも確認できます。

関連するSOの質問をいくつか参照 した 後、あきらめる前に問題を解決する方法の半分を得ることができました。

エレガントなソリューションを知っている人はいますか?

4

1 に答える 1

0

私が提案する一般的なアプローチは次のとおりです。

  • 上矢印または下矢印が押されたときにイベントをインターセプトしkeydown、ブラウザのデフォルトを防止します
  • 特定の要素に相対的な文字インデックスとしてキャレットの位置を取得および設定できる関数を次に示します。それらは不完全ですが、ほとんどの状況で仕事をします: contenteditable div の innerHTML を置き換えます(また、この jsFiddleは同じことを行いますが、Rangy ライブラリへの依存を取り除きます)。これらを使用して、1 に対するキャレット文字インデックスを取得し、上または下<li>に対してキャレットを同じ位置に設定します。<li>
于 2012-04-15T23:55:31.583 に答える