2013-08-26 9 views
9

私はRailsアプリケーションにcontenteditable divを持っていて、強調表示されているときにテキストの上に小さなポップアップを表示できるようにする必要があります。現在、私は動作するコードを持っており、強調表示されたテキストをアラートに表示します。しかし、この関数はmouseupで実行されるので、divをクリックして入力またはハイライトを開始すると、空のアラートがスローされます。ContentEditable DIVで選択したテキストを取得しますか?

function getSelected() { 
      if (window.getSelection) { 
       return window.getSelection(); 
      } 
      else if (document.getSelection) { 
       return document.getSelection(); 
      } 
      else { 
       var selection = document.selection && document.selection.createRange(); 
       if (selection.text) { 
        return selection.text; 
       } 
       return false; 
      } 
      return false; 
     }; 
$("#content-create-partial").bind("mouseup", function(){ 
       var text = getSelected(); 
       if(text) { 
        console.log(text); 
       } 
       else{ 
        console.log("Nothing selected?"); 
       }; 
      }); 

がどのように私は、ユーザーがクリックしたときのcontentEditableのdivに関数を実行するから、jQueryのを防ぐん:

は、ここに私のコードですか?実際のテキストがハイライト表示されているときに実行するだけです。

答えて

-2

、選択範囲が空の場合にだけチェック:if ($.trim(text) != '') ...

0

をユーザーが選択を開始したときに発射する「selectstart」イベントがあります。選択終了イベントはありませんが、選択が発生したことを確認するために "selectstart"イベントが発生した後にmouseupイベントを待機することができます。

編集:

チェック - HTML Content Editable div: select text event

2

あなたは彼らが等しいかどうかを確認するためにwindow.getSelection().anchorOffsetwindow.getSelection().extentOffsetを比較することができます。もしそうであれば、通常のクリックだった。

1

何も選択されていない場合は、trueが返されます。

@ Tarun Dugarからインスパイアされています。しかし、すべてのブラウザで動作しませんでした。次は働いた。

window.getSelection().focusOffset == window.getSelection().anchorOffset; 
関連する問題