0

ユーザーがテキストを選択したら、選択したテキストの下にツールバーを表示しようとしています。私は多くのスタックオーバーフローの回答を閲覧しましたが、思いついたのは以下のコードです。

ユーザーがマウスのクリックだけでなく、キーボードの選択 (alt+shift+arrow キー)でテキストを選択したときに、ツールバーをトリガーしたい。このテキストエディタとほとんど同じです。

このgetSelected()関数は、マウスまたはキーボードの選択で選択されたテキストを問題なく返します。しかし、その範囲にダミー要素を挿入しようとすると、常にテキストエリアの上部にダミーが挿入されます (ダミーが挿入される場所を確認するために、「バー」というテキストを追加しました) 。

と何か関係があると思います.getRangeAt(0)。選択したテキストの位置を取得したい（ダミーを挿入して<span>）。

function getSelected(){
  var t = '';
  if(window.getSelection){
    t = window.getSelection();
  }else if(document.getSelection){
    t = document.getSelection();
  }else if(document.selection){
    t = document.selection.createRange().text;
  }
  return t;//.toString()
}

$('#post_content').on('select',function(){
    var range = getSelected().getRangeAt(0);
    range.collapse(false);
    var dummy = document.createElement("span");
    // dummy.innerHTML = "bar";
    range.insertNode(dummy);
    var rect = dummy.getBoundingClientRect();
    var x = rect.left, y = rect.top;
    dummy.parentNode.removeChild(dummy);
    alert(x + "/" + y);
});

JSFiddle をチェックしてください: http://jsfiddle.net/aTq5q/

何か案は？ありがとう！

4

1 に答える 1

1

2 つの問題があるようです。

  1. テキスト領域のキャレットの X/Y 座標の決定
  2. 選択変更イベントをキャッチします。

最初の問題については、Component.io textarea-caret-position プラグインを確認してください。小さく、シンプルで、クロスブラウザーで、依存関係はありません - demo。

于 2014-03-17T12:18:27.083 に答える