Question

我正在寻找一种方法，在单击文本时使用jquery选择跨度内的文本。

例如，在下面的html片段中，我想要在单击时选择文本“\ apples \ oranges \ pears”。

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

我自己试图实现这一点无济于事。

Answer 1

可以使用本机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();
    }
});

Answer 2

工作示范：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();
});

这个想法（参见上面的评论）是用输入动态替换span，只有跨浏览器的方式我才知道选择了文本。

请注意，这只是道路的一半，因为您可能想要取消选择，样式以删除边框等。

我还必须确切地说，与跨度相反的输入不能跨越多行。

我不认为这可以/应该在实际应用中使用，除非在非常具体的点上。

编辑：新版本：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();
    });
});

Answer 3

与style="user-select: all;"的JS相比，您可以使用CSS轻松实现此目的

添加cursor: pointer;，以便他们可以点击...

查看代码段：

<p>
Fruit 
<span style="user-select: all; cursor: pointer;">\\apples\oranges\pears</span>
</p>

Answer 4

要选择特定的Span，您需要为该范围提供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

如何在点击时选择跨度的文本？

4 个答案: