リンクでテキストをCSSで選択できるようにする

Question

有名な引用を収集するサイトで作業しています。引用のテキストは他のことをするためのリンクです[...]しかし、私はまた、ユーザが引用のテキストを選択してコピーできることを望んでいます。

ほとんどのブラウザでは、リンクのテキストを簡単に選択できません。

CSSでこれを無効にして、ユーザーがテキストを選択できるようにすることはできますか？

Answer 1

いいえ、リンクに大量のテキストブロックを置いてはいけません。リンクは理想的には段落全体ではなく1つまたは2つの単語であるべきです。

Answer 2

できません。しかし、要素をリンクのように見せることはできますが、実際に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

（それを "手" にカーソルを得た）私はちょうど続けるだろう見積もり 単にテキスト（リンクなし）を入力してから、最後に小さなリンクを追加してください。

Answer 3

これはCSSのための仕事ではありません。これはレンダリングではなく機能性であるためです。リンクをクリックするとそのリンクをたどることになるため、これを破ると大きなユーザビリティの問題が発生するため、難しい問題です。

最高のアプローチは、見積リンクを作成してリンクを別々に使用することを避けることです。例えば、クォートの下のクレジット、またはクレジット内の引用されたリソースの名前は、自然なリンクになります。クリックを「何か他のことをする」ようにしたいのであれば、おそらく引用に関連するリンクではなくボタンを使うべきです。

Answer 4

あなたのサイトは実際には見えませんが、あなたのリンクタグに単なる見積もり以上のものが含まれていると思われます。

リンクに「質問するかどうか」と表示されている場合は、他の質問と同じにする必要があります。リンクが「ここには大きな引用があります：「そうであるべきかどうか - それは質問です。ここをクリックして他のことをしてください！」真ん中のテキストを選択することができなくなります。これは、彼らが望むすべてです。

リンクテキストがで、選択するテキストがであることを確認して、タグの外に他のものを置くと問題ありません。

Answer 5

Firefoxでは、Altキーを押してから、いつものようにマウスを使ってハイパーリンクの一部を選択できます。したがって、jQueryを使用して同様の方法を実装することもできます。Altキー（または割り当てたキー）が押され、マウスポインタがリンク上にある場合は、リンクを無効にします。キーが離されたら、リンクを有効にします。 もちろん、ユーザーに選択方法を伝える必要があります。

Answer 6

これは私が思いついた方法です。

<a>タグの代わりに<span>を使用しますが、通常のリンクのように振る舞います。テキストをロールオーバーすると、500ミリ秒のタイムアウトがあり、カーソルがテキスト選択カーソルに変わります。テキストをクリックしてドラッグしてもクリックアクションは発生しませんが、テキストをダブルクリックすると（単語全体を選択すると）、引き続きクリックイベントが発生します。これは改善される可能性がありますが、うまく動作し、プロダクションで使用できる可能性があります。

タイムアウトを実行すると、ボタンの右上に小さいクリップボードアイコンが表示され、クリップボードにテキストをコピーできます。ボタンの.mouseout()を押すと、このクリップボードアイコンが非表示になります。

さらに、マウスがボタンを離れるときにテキスト選択をクリアする機能もあります。 （Clear Text Selection with JavaScript）

HTML

<span data-href="javascript:alert('This is the click action.');" class="link selectable"> 
    <span>info@mydomain.com</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段落タグ内

Answer 7

入れアンカータグとそれがこの

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

シンプルで使いやすいように、選択可能なだけでなく、クリック可能になります。