使用CSS選擇鏈接文本

我正在一個網站上工作，該網站收集着名的報價。報價文本是一個鏈接，可以做其他事情[...]但我也希望用戶可以選擇並複製報價文本。使用CSS選擇鏈接文本

但幾乎在每個瀏覽器中，用戶都無法輕鬆選擇鏈接中的文本。

是否有可能在CSS中覆蓋它並使用戶可以選擇文本？

來源

2012-07-19 Lukas

我認爲首先你需要弄清楚你如何想象這個工作。如果點擊鏈接並沒有把你帶到任何地方，你將如何到達鏈接？如果你不能點擊它，你將如何選擇文本？ – 2012-07-19 20:11:23

不，但是您不應該在鏈接中包含大量文本塊 - 理想情況下，鏈接應該只是一個或兩個單詞，而不是整個段落。

來源

2012-07-19 20:13:32

你不能。然而，你可以讓一個元素看起來像一個鏈接，但是使用JS來處理它的「鏈接」部分。

的jQuery：

$(".q").click(function() { 
    window.location.href=$(this).attr('data-link'); 
});

HTML：

<span data-link="link.html" class="q">text here</span>

CSS（給它的「手」光標）

.q { 
    cursor: pointer; 
}

Demo

我只想保持引用只是文本（無鏈接），然後在最後添加一個更小的鏈接以獲取更多信息或任何可能的信息。

來源

2012-07-19 20:15:27 sachleen

這隻有在您選擇整個鏈接或從中間到一端時纔有效。如果你在中間選擇一個短語，它會觸發windows.location – 2012-07-19 20:24:49

另外，如果你使用JavaScript來實現常規文本的鏈接功能，你會爲屏幕閱讀器或瀏覽器中禁用javascript的人創建一個主要的可訪問性問題（根據公司政策或出於安全原因。） – 2012-07-19 20:35:33

@ForteL，良好的捕獲。羅迪：是的。就像我說的，我不會這樣做，只是提供一個可能的解決方案。 – sachleen 2012-07-19 20:38:39

這不是CSS的工作，因爲這是功能性，而不是渲染。這是一個棘手的問題，因爲點擊鏈接應該意味着遵循這個鏈接，打破這個鏈接會造成主要的可用性問題。

最好的方法是避免使報價鏈接和使用鏈接與他們分開。例如，報價下面的信用額度或信用中引用資源的名稱將是一個自然的鏈接。如果你想點擊「做別的事情」，那麼也許你應該使用按鈕，而不是鏈接，與報價相關聯。

來源

2012-07-19 20:15:51

我不能說沒有在行動中看到您的網站，但我懷疑的問題是，你的鏈接標籤包含的不僅僅是報價多。

如果該鏈接顯示爲「生存還是毀滅 - 這是個問題」，然後選擇它應該是與選擇的任何其他問題。如果鏈接是「這是一個偉大的報價：'是或不是 - 這就是問題，點擊此處做其他事情！」那麼他們將無法選擇中間的文本，這是他們想要的。

請確保您的鏈接文本只有他們想要選擇的文本，並將任何其他內容放在標籤之外，您就會好起來的。

來源

2012-07-19 20:16:24 sgress454

我認爲OP希望允許他/她的用戶選擇*報價的任何部分*。 – 2012-07-19 20:36:16

在Firefox中，您可以通過按Alt鍵選擇部分超鏈接，然後像往常一樣用鼠標選擇。因此，一種選擇是使用jQuery來實現類似的東西：如果Alt鍵被按下（或您指定鍵）和鼠標指針懸停在鏈接，然後禁用鏈接。當密鑰被釋放時，啓用鏈接。當然，您必須告訴您的用戶如何進行選擇。

來源

2012-07-19 20:33:13

顯然這也適用於Chrome。謝謝你的提示！ – cvsguimaraes 2017-09-23 11:26:14

這是我想出的方法。

它採用了<span>代替<a>標籤，但其工作方式就像一些獎金的常規鏈接。翻轉文本時，會有500毫秒的超時時間，這會將光標更改爲文本選擇光標。單擊並拖動文本不會觸發單擊操作，但是雙擊文本（選擇整個單詞）仍會觸發單擊事件。這可以得到改善，但它運作良好，可用於生產。

另一種更好的方法是在超時執行時，它還在按鈕右上角顯示一個小剪貼板圖標，可以單擊該按鈕將文本複製到剪貼板。當你按下按鈕.mouseout()時，它會隱藏這個剪貼板圖標。

此外，另一個功能可能是清除鼠標離開按鈕時的文本選擇。（Clear Text Selection with JavaScript）

HTML

<span data-href="javascript:alert('This is the click action.');" class="link selectable"> 
    <span>[email protected]</span> 
</span>

CSS

.link { 
    font: 16px/0 Tahoma, sans-serif; 
    padding: 15px 30px; 
    border: 1px solid #0079be; 
    border-radius: 4px; 
    color: #0079be; 
    cursor: pointer; 
} 
.link:hover { 
    color: #fff; 
    background: #0079be; 
} 
.link.selectable > span { 
    display: inline-block; 
} 
.link.selectable.selecting > span { 
    cursor: text; 
}

的JavaScript

$('.link.selectable > span').hover(
    function() { 
    var selectableTimeout = setTimeout(
     function(elem) { 
     $(elem).parent().addClass('selecting'); 
     }, 
     500, this 
    ); 
    $(this).data('selectableTimeout', selectableTimeout); 
    }, 
    function() { 
    clearTimeout($(this).data('selectableTimeout')); 
    $(this).parent().removeClass('selecting'); 
    } 
); 
$('.link.selectable').mousedown(
    function(e) { 
    $(this).data('mouseX', e.pageX); 
    $(this).data('mouseY', e.pageY); 
    } 
); 
$('.link.selectable').mouseup(
    function(e) { 
    var mouseX = $(this).data('mouseX'); 
    var mouseY = $(this).data('mouseY'); 
    if (mouseX && mouseY && mouseX === e.pageX && mouseY === e.pageY) { 
     window.location.href = $(this).attr('data-href'); 
    } 
    } 
);

012一個段落標記內

來源

2016-08-10 11:59:49 Gavin

-1

認沽錨標記，這將是可選的，以及點擊，這樣

<p><a href="#">Click Me</a></p>

簡單和容易。

來源

2016-10-27 07:11:32 Srijay

使用CSS選擇鏈接文本

回答

相關問題