5

私は人々が単語やフレーズを（選択時に）取得できるツールを構築しようとしています。選択部分は実行されますが、単語部分は実行されません。

誰かが単語をクリックしたときに現在の単語を取得できるようにする必要があり、この解決策を見つけました

段落内の単語クリックを取得

残念ながら、このコードはすべての単語を変更し、すべての単語にa<span>を追加します。これにより、テキストにhtmlタグを追加できないため、問題が発生します（cssファイルは動的にインポートまたは追加できます）

可能であれば、これを達成するためのより良い方法はありますか？

元：

Lorem ipsum dolorは、amet、consecteturadipiscingelitに座ります。Donec auctor ante sit amet nislconsequatvolutpat。

「座る」をクリックすると、「座る」と警告します

4

2 に答える 2

17

さて、あなたのソリューションでは、トリッキーなものとしてイベントを操作し、ダブルクリックイベントによって生成された範囲で選択された単語を取得する必要がselectionsあります。doubleclick

新しいタグを導入したくない場合は、他に方法はありません。

これを試して：

ライブデモ： http： //jsfiddle.net/oscarj24/5D4d3/

$(document).ready(function() {

    /* set hand cursor to let know the user that this area is clickable */
    var p = $('p');
    p.css({ cursor: 'pointer' });

    /* doubleclick event working with ranges */
    p.dblclick(function(e) {
        var selection = window.getSelection() || document.getSelection() || document.selection.createRange();
        var word = $.trim(selection.toString());
        if(word != '') {
            alert(word);
        }
        /* use this if firefox: selection.collapse(selection.anchorNode, selection.anchorOffset); */
        selection.collapse();
        e.stopPropagation();
    });

});​

お役に立てれば ：-）

于 2012-09-07T16:24:22.353 に答える
2

Oscar Jaraの回答（上記）によると、新しいタグを導入したくない場合は、[クリックした単語を返す]他の方法はありません。 それはおそらく2012年には真実でしたが、現在getSelectionがあります。

DocumentOrShadowRootインターフェイスのgetSelection（）プロパティは、ユーザーが選択したテキストの範囲またはキャレットの現在の位置を表すSelectionオブジェクトを返します。

私はこれをWindowsChrome63.0.3239.84とWindowsFirefox56.0で動作させています。他のブロワーでテストするには、このjsfiddleの例を使用してテストしてください

    window.getSelection();

getSelectionをカバーする関連するSOの質問：

シングルクリックで単語を取得

テキスト内でクリックされた単語を検出します

クリックした単語が表示される文を返す

于 2017-12-28T17:37:47.090 に答える