ユーザーがドラッグして選択を行い、選択したテキストを取得するときに関数を呼び出します

アダムストーン

このjQueryプラグインの動作を複製しようとしていますが、テキスト入力ではない要素に対してです。

マウスをクリックしてドラッグしてテキストを選択できるようにしたいのですが、テキストが選択されると、関数が呼び出され、現在選択されているテキストにアクセスできます。

m59

mousemoveイベントを使用して、テキストの選択を確認できますこれは基本的な例です。リスナー(コールバック)は、新しい選択がある場合にのみ呼び出されます。

function addTextSelectListener(element, listener) {
  var currentSelTxt = '';
  element.addEventListener('mousemove', function() {
    var sel = window.getSelection();
    var newSelTxt = sel.toString();
    if (newSelTxt !== currentSelTxt) {
      currentSelTxt = newSelTxt;
      listener(sel, newSelTxt);
    }
  });
}
var outputElem = document.getElementById('output');
addTextSelectListener(window, function(sel, selTxt) {
  console.log(sel);
  outputElem.innerHTML = selTxt;
});
<body>
  <p>Some text and stuff!</p>
  <p id="output"></p>
</body>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

ユーザーがページポストバックのドロップダウンからアイテムを選択したらすぐに関数を呼び出したいのですが、どうすればよいですか?

分類Dev

ユーザーがrichTextBoxでテキストを選択したことを検出します

分類Dev

php関数を使用して、ユーザーがドロップダウンリストから生年月日を選択できるようにします

分類Dev

Angular jsは、範囲divおよびspan要素からすべてのテキストを選択して、ユーザーが選択したテキストをコピーできるようにします

分類Dev

jQueryの関数パラメーターに基づいて、選択した属性と値のテキストを表示する関数を作成します

分類Dev

反応では、ユーザーが選択したオプションのテキストを選択してそのテキストをコピーできるようにする方法を選択します

分類Dev

別のアクションが呼び出されたときにユーザーが選択した画像を表示したままにする方法

分類Dev

変数値をテキストと等しくする方法はありますか?fprintf行の途中にユーザーが選択した単語を表示しようとしています

分類Dev

ユーザーがページの外に移動することを選択した場合、onbeforeunload()内で外部関数を呼び出す方法は?

分類Dev

ユーザーがキーを使用してトラバースした後、Enterキーを押してドロップダウン要素を選択します

分類Dev

キーボードを使用して選択したテキストを「ドラッグ」しますか?

分類Dev

ユーザーがテキストを選択したときにTextBoxのハイライトの色を変更しますか?

分類Dev

ユーザーが選択したテキストフラグメントを強調表示する

分類Dev

ユーザーがグリッドビューで行を選択できるようにしますか?

分類Dev

ブートストラップ複数選択で $(this) を呼び出します

分類Dev

選択した値がノックアウトで変更されたときに関数を呼び出す

分類Dev

ユーザーがドロップダウンボックスで日付を選択したときに、JavaScriptを使用してテキストボックスを日付ピッカーに置き換えます

分類Dev

ランダムに選択された文字列名を取得し、コードがテキストとして出力されないまま既存の部分文字列を選択するにはどうすればよいですか?

分類Dev

Macのコンテキストメニューアクションが選択されたときに呼び出されるsyscallまたは関数を把握しますか?

分類Dev

タグをネストせずに、ユーザーが選択したテキストフラグメントを強調表示します

分類Dev

ユーザーがバーをクリックしたときにリストからグーグルチャートを選択します

分類Dev

コマンドボタンを選択すると、ユーザーフォームが開きます。フォームのテキストボックスにデータを入力して、別のシートの行に挿入するにはどうすればよいですか?

分類Dev

ユーザーがコンテキストメニューからオプションを選択すると、RecyclerViewはタスクを実行するための正しい位置を取得できません

分類Dev

ユーザーがドロップダウンで値を選択するときにデータベースからIDを選択します

分類Dev

innerHTMLを使用してページに新しい選択を追加すると、以前に追加された選択要素は、ユーザーがドロップダウンから選択した値を失います。

分類Dev

選択したツリービューノードのテキストをクリップボードにコピーしようとしていますが、クリップボードの最後のノードのみを取得しています

分類Dev

DatePickerで日付を選択したときにテキストフィールドの値を取得する方法

分類Dev

選択した行レコードをテキストボックス/ラベルに表示します

分類Dev

ユーザーが選択した複数の行を別のワークシートにコピーする必要があります。問題は、マクロが実行されるたびに選択された行が異なることです

Related 関連記事

  1. 1

    ユーザーがページポストバックのドロップダウンからアイテムを選択したらすぐに関数を呼び出したいのですが、どうすればよいですか?

  2. 2

    ユーザーがrichTextBoxでテキストを選択したことを検出します

  3. 3

    php関数を使用して、ユーザーがドロップダウンリストから生年月日を選択できるようにします

  4. 4

    Angular jsは、範囲divおよびspan要素からすべてのテキストを選択して、ユーザーが選択したテキストをコピーできるようにします

  5. 5

    jQueryの関数パラメーターに基づいて、選択した属性と値のテキストを表示する関数を作成します

  6. 6

    反応では、ユーザーが選択したオプションのテキストを選択してそのテキストをコピーできるようにする方法を選択します

  7. 7

    別のアクションが呼び出されたときにユーザーが選択した画像を表示したままにする方法

  8. 8

    変数値をテキストと等しくする方法はありますか?fprintf行の途中にユーザーが選択した単語を表示しようとしています

  9. 9

    ユーザーがページの外に移動することを選択した場合、onbeforeunload()内で外部関数を呼び出す方法は?

  10. 10

    ユーザーがキーを使用してトラバースした後、Enterキーを押してドロップダウン要素を選択します

  11. 11

    キーボードを使用して選択したテキストを「ドラッグ」しますか?

  12. 12

    ユーザーがテキストを選択したときにTextBoxのハイライトの色を変更しますか?

  13. 13

    ユーザーが選択したテキストフラグメントを強調表示する

  14. 14

    ユーザーがグリッドビューで行を選択できるようにしますか?

  15. 15

    ブートストラップ複数選択で $(this) を呼び出します

  16. 16

    選択した値がノックアウトで変更されたときに関数を呼び出す

  17. 17

    ユーザーがドロップダウンボックスで日付を選択したときに、JavaScriptを使用してテキストボックスを日付ピッカーに置き換えます

  18. 18

    ランダムに選択された文字列名を取得し、コードがテキストとして出力されないまま既存の部分文字列を選択するにはどうすればよいですか?

  19. 19

    Macのコンテキストメニューアクションが選択されたときに呼び出されるsyscallまたは関数を把握しますか?

  20. 20

    タグをネストせずに、ユーザーが選択したテキストフラグメントを強調表示します

  21. 21

    ユーザーがバーをクリックしたときにリストからグーグルチャートを選択します

  22. 22

    コマンドボタンを選択すると、ユーザーフォームが開きます。フォームのテキストボックスにデータを入力して、別のシートの行に挿入するにはどうすればよいですか?

  23. 23

    ユーザーがコンテキストメニューからオプションを選択すると、RecyclerViewはタスクを実行するための正しい位置を取得できません

  24. 24

    ユーザーがドロップダウンで値を選択するときにデータベースからIDを選択します

  25. 25

    innerHTMLを使用してページに新しい選択を追加すると、以前に追加された選択要素は、ユーザーがドロップダウンから選択した値を失います。

  26. 26

    選択したツリービューノードのテキストをクリップボードにコピーしようとしていますが、クリップボードの最後のノードのみを取得しています

  27. 27

    DatePickerで日付を選択したときにテキストフィールドの値を取得する方法

  28. 28

    選択した行レコードをテキストボックス/ラベルに表示します

  29. 29

    ユーザーが選択した複数の行を別のワークシートにコピーする必要があります。問題は、マクロが実行されるたびに選択された行が異なることです

ホットタグ

アーカイブ