29

テキストがクリックされたときに jquery を使用してスパン内のテキストを選択する方法を探しています。

たとえば、以下の HTML スニペットでは、「\apples\oranges\pears」というテキストがクリックされたときに選択されるようにします。

<p>Fruit <span class="unc_path">\\apples\oranges\pears</span></p>

私はこれを自分で実装しようとしましたが、役に立ちませんでした。

4

4 に答える 4

49

ネイティブJavaScriptで実装できます。jsFiddleでの実用的なデモンストレーション。コードは次のようになります。

$('.unc_path').click(function (){
    var range, selection;

    if (window.getSelection && document.createRange) {
        selection = window.getSelection();
        range = document.createRange();
        range.selectNodeContents(this);
        selection.removeAllRanges();
        selection.addRange(range);
    } else if (document.selection && document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(this);
        range.select();
    }
});
于 2013-02-11T16:35:05.717 に答える
12

実際のデモンストレーション: http://jsfiddle.net/dystroy/V97DJ/

$('.unc_path').click(function (){
    var text = $(this).text();
    var $input = $('<input type=text>');
    $input.prop('value', text);
    $input.insertAfter($(this));
    $input.focus();
    $input.select();
    $(this).hide();
});​

アイデア（上記のコメントを参照）は、スパンを入力に動的に置き換えることです。これは、テキストを選択したことを知っているクロスブラウザーの方法のみです。

おそらく選択を解除したり、スタイルで境界線を削除したりしたいので、これは道のりの半分に過ぎないことに注意してください。

また、スパンとは対照的に、入力は複数の行にまたがることはできないことも正確にする必要があります。

非常に特定の点を除いて、これを実際のアプリケーションで使用できる/使用すべきではないと思います。

編集:新しいバージョン: http://jsfiddle.net/dystroy/A5ZEZ/

このバージョンでは、フォーカスが失われるとテキストが通常に戻ります。

$('.unc_path').click(function (){
    var text = $(this).text();
    var $this = $(this);
    var $input = $('<input type=text>');
    $input.prop('value', text);
    $input.insertAfter($(this));
    $input.focus();
    $input.select();
    $this.hide();
    $input.focusout(function(){
        $this.show();
        $input.remove();
    });
});​
于 2012-07-12T12:13:12.073 に答える
0

特定のスパンを選択するには、そのスパンに提供される ID が必要です。それ以外の場合は、利用可能なすべてのスパンのリストをループして取得する必要があります。

これを例として見てみましょう（id属性を追加しました）

  <p>Fruit <span class="unc_path" id="span1">\\apples\oranges\pears</span></p>

JQueryは次のようになります

$('span1').text()  // if you want to take the text
$('span1').html() // if you want to take the html
于 2012-07-12T12:03:32.060 に答える