允許用戶選擇鏈接文本的一部分

是否有可能允許用戶點擊鏈接並選擇部分文本？（在某些或任何現代瀏覽器中）。允許用戶選擇鏈接文本的一部分

是否有CSS/HTML解決方案？或者還有其他的，也許是JS解決方案？

例如，如果您想選擇「想選擇此項。」在以下示例中爲。

HTML：

<a href="#"> 
    Don't want to select this. 
    Want to select this. 
    Don't want to select this. 
</a>

CSS：

a{ 
    display: inline-block; 
    width: 10em; 
    margin: 10px; 
    padding: 10px; 
    border: 2px solid #eee; 
    text-decoration: none; 
}

jsFiddle

我試圖使用谷歌Chrome以下。但它不允許人們選擇鏈接內的文本，只是禁用拖動元素。

-webkit-user-select: all; 
-webkit-user-drag: none;

來源

2013-11-27 Qtax

在JavaScript中有一個關於實現這一點的方法。您可以用跨度替換鏈接並處理mousedown，然後查看是否進行了選擇，如果不是模擬鏈接點擊。

DEMO：http://jsfiddle.net/L8px2/2/

CODE：

var posX = -1, posY = -1; 

$('a').each(function() { 
    var a = $(this); 
    a.replaceWith(
      $('<span />') 
       .text(a.text()) 
       .attr({ 
        href: a.attr('href'), 
        target: a.attr('target') 
       }) 
       .addClass('selectable') 
    ); 
}); 

$(document).on('mousedown', '.selectable', function(evt) { 
    posX = evt.pageX; 
    posY = evt.pageY; 
}); 
$(document).on('mouseup', '.selectable', function(evt) { 
    if(evt.pageX == posX && evt.pageY == posY) { 
     alert('no selection. simulate click.'); 
     window.location.href = $(this).attr('href'); 
     // TODO: handle target attribute correctly 
    } 
});

來源

2013-11-27 13:25:01 techfoobar

+1。不過，如果有一個無JS的解決方案，我更加好奇。可能不會。 – Qtax

是的，一個純CSS的解決方案應該是最乾淨的。但是'-webkit-user-select'沒有按照它的方式工作，這似乎很困難。 – techfoobar

不幸的是，這會破壞''元素上的常見交互，例如右鍵單擊，Ctrl +單擊和中鍵單擊。不是說我有更好的解決方案來提供...... :( – Thomas

您可以將<span>元素添加到您不希望選擇那些線，然後應用-webkit-user-select: none。

例如：

<a href="#"> 
    <span class="no-select">Don't want to select this.</span> 
    Want to select this. 
    <span class="no-select">Don't want to select this.</span> 
</a>

而反過來：

span.no-select { 
    -webkit-user-select: none; 
    -webkit-user-drag: none; 
}

看到這個jsFiddle demo。它適用於Chrome，但我無法在一分鐘內測試其他瀏覽器。

來源

2013-11-27 13:09:01 BenM

有了這個，我仍然無法鏈接內點擊並選擇文本的某些部分。用戶想要選擇的文本取決於用戶，因此是任意的。 – Qtax

@Qtax您如何期待點擊一個鏈接，而不是把它帶到某個地方？ –

然後不，你不能。不過，我不明白你期望文本是如何提供給用戶的：/你可以詳細說明一下，因爲你的問題明確指出了不應該被突出顯示的文本... – BenM

允許用戶選擇鏈接文本的一部分

回答

相關問題