0

ユーザーが強調表示したテキストを処理するためのロジックに取り組んでいます。http://mark.koli.ch/2009/09/use-javascript-and-jquery-to-get-user-selected-text.htmlで Mark Koli による非常に良い例を見つけました。

http://jsfiddle.net/metalskin/43c8h/8/で実際の例を作成しました。

次のように、特定のインスタンスのコードに問題があります。

  1. テキストを選択します。
  2. ダイアログが表示されます。
  3. ダイアログを閉じます。
  4. ドラッグせずにクリックして、強調表示されたテキストをクリアします。
  5. ダイアログが表示されます。
  6. ダイアログを閉じます。
  7. テキストの選択が解除されます。

私のロジックでは、ダイアログを使用していません (例としては簡単です)。ユーザーがアクションを実行できるように、画像を含む div を挿入しています。

問題は、2 回目のクリックが実際にはテキストをクリアすることですが、何らかの理由で、ブラウザがテキストをクリアする前にマウスアップ イベントを発生させていることです (とにかく Firefox の下で)。これは明らかにダイアログがポップアップする問題ではありませんが、私のロジックでは複数の div が追加され、テキスト上に複数のフローティング画像が追加されます。

イベントによって強調表示されたテキストが削除されることを判断する方法はありますか? 理想的には、ブラウザがテキストをクリアした後にイベントが発生することを望みます。

私はそれをどのように使用しているかのユースケースを説明する必要があります。

  1. ユーザーがページ上のテキストを強調表示する
  2. テキストの強調表示からマウス ボタンを離したところの上にアイコンが表示されます。
  3. ユーザーがアイコンを選択すると、強調表示されたテキストに対してマークを付けるための詳細を入力するためのフォームが開きます (この時点でアイコンは削除されます)。
  4. ユーザーがフォーム (ajax) を送信すると、フォームが閉じます。
  5. ページが表示され、強調表示されたテキストが強調表示されなくなりました (ただし、余分なマークアップが追加されます)。

また

  1. ユーザーがページ上のテキストを強調表示する
  2. テキストの強調表示からマウス ボタンを離したところの上にアイコンが表示されます。
  3. ユーザーがページの他の場所をクリックすると、強調表示されたテキストとアイコンが削除されます。
  4. ユーザーがフォームを送信すると、フォームが閉じます。

アイコンが選択されたときに選択されたテキストが選択解除されることに問題はありませんが、問題は、ページの別の部分をクリックすると、マウスイベントが再アクティブ化され、アイコンが2つ（または適切でない場合はダイアログが表示されることです）提供された例では）。

4

1 に答える 1

0

どうぞ^_^

http://jsfiddle.net/43c8h/16/

このコードを変更して、マウスアップイベントの選択をクリアしました。

if (selectedText != '') {
    alert("You selected:\n" + selectedText + "\n");
    window.getSelection().removeAllRanges();
}

または、ユーザーがテキストを選択した後もテキストを強調表示したままにしたい場合は、同じwindow.getSelection().removeAllRanges();で mousedown 関数を呼び出すことができます。マウスがクリックされるたびに選択をクリアするコード。

于 2012-01-05T08:53:09.650 に答える