Make Text in Link wählbar mit CSS

Question

Ich arbeite an einer Website, die berühmte Zitate sammelt. Der Text des Zitats ist ein Link, um etwas anderes zu tun [...] Aber ich möchte auch, dass der Benutzer den Text des Zitats auswählen und kopieren kann.

Aber in fast jedem Browser kann der Benutzer nicht einfach Text in Links auswählen.

Ist es möglich, dies in CSS zu überschreiben und es dem Benutzer zu ermöglichen, den Text auszuwählen?

Answer 1

Nein, aber Sie sollten keine großen Textblöcke in einem Link haben - ein Link sollte idealerweise nur aus einem oder zwei Wörtern bestehen, nicht aus einem ganzen Absatz.

Answer 2

Sie können nicht. Sie können jedoch ein Element wie einen Link aussehen lassen, aber JS verwenden, um den "Link" -Teil davon zu verarbeiten.

jQuery:

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

HTML:

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

CSS (es geben, die "Hand" Cursor)

.q { 
    cursor: pointer; 
} 

Demo

Ich würde einfach weiter die Zitat Nur Text (kein Link) und dann einen kleineren Link am Ende für weitere Informationen oder was auch immer es sein mag.

Answer 3

Dies ist nicht wirklich ein Job für CSS, da dies Funktionalität, nicht Rendering ist. Und es ist ein schwieriges Thema, denn ein Klick auf einen Link soll bedeuten, dass man dem Link folgt, und wenn man das bricht, entsteht ein großes Usability-Problem.

Der beste Ansatz ist es, zu vermeiden, dass die Zitate Links und die Verwendung von Links getrennt zusammen mit ihnen. Zum Beispiel wären die Kredite unter einem Zitat oder der Name der zitierten Ressource in den Credits eine natürliche Verbindung. Und wenn Sie einen Klick möchten, um "etwas anderes zu tun", dann sollten Sie vielleicht Tasten, keine Links, die mit den Zitaten verbunden sind, verwenden.

Answer 4

Ich kann nicht sagen, ohne Ihre Website in Aktion zu sehen, aber ich vermute, dass das Problem darin besteht, dass Ihr Link-Tag mehr als nur das Zitat enthält.

Wenn der Link als "Zu sein oder nicht zu sein - das ist die Frage" angezeigt wird, sollte die Auswahl dieselbe sein wie die Auswahl einer anderen Frage. Wenn der Link "Hier ist ein großartiges Zitat:" Sein oder nicht sein - das ist die Frage. Klicken Sie hier, um etwas anderes zu tun! " dann werden sie nicht in der Lage sein, den Text in der Mitte auszuwählen, was alles ist, was sie wollen.

Stellen Sie sicher, dass Ihr Linktext nur der Text ist, den sie auswählen möchten, und legen Sie alles andere außerhalb der Tags, und alles wird gut.

Answer 5

In Firefox können Sie Teile der Hyperlinks auswählen, indem Sie die Taste Alt drücken und dann wie gewohnt mit der Maus auswählen. Eine Option besteht also darin, etwas Ähnliches unter Verwendung von jQuery zu implementieren: Wenn die Taste Alt gedrückt wird (oder eine Taste, die Sie zuweisen) und der Mauszeiger sich über der Verbindung befindet, deaktivieren Sie die Verknüpfung. Wenn der Schlüssel losgelassen wird, aktivieren Sie den Link. Natürlich müssten Sie Ihren Benutzern sagen, wie sie die Auswahl treffen.

Answer 6

Hier ist eine Methode, die ich mir ausgedacht habe.

Es verwendet ein <span> anstelle eines <a> Tags, aber verhält sich wie eine normale Verbindung mit einigen Boni. Wenn Sie den Text rollen, gibt es eine Zeitüberschreitung von 500 Millisekunden, die den Cursor zum Textauswahlcursor ändert. Wenn Sie auf den Text klicken und ihn ziehen, wird keine Klickaktion ausgelöst. Durch Doppelklicken auf den Text (um ganze Wörter auszuwählen) wird jedoch immer noch das Klickereignis ausgelöst. Dies könnte verbessert werden, aber es funktioniert gut und könnte in der Produktion verwendet werden.

Eine weitere Möglichkeit, dies noch besser zu machen, wäre, wenn das Zeitlimit ausgeführt wird, ein kleines Zwischenablagensymbol oben rechts auf der Schaltfläche, auf das sie klicken können, um den Text in ihre Zwischenablage zu kopieren. Wenn Sie die Schaltfläche .mouseout() der Schaltfläche verwenden, wird dieses Zwischenablagensymbol ausgeblendet.

Eine weitere Funktion könnte außerdem sein, die Textauswahl zu löschen, wenn die Maus die Schaltfläche verlässt. (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'); 
    } 
    } 
); 

https://jsfiddle.net/gavin310/6efdyq4h/

Answer 7

Put Anker-Tag in einem Absatz-Tag, und es wird auch als anklickbare, wie diese

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

Einfach und leicht wählbar sein.