Prevent Textauswahl von <button> Element

Question

In meinem HTML habe ich eine Schaltfläche in einem div befindet:

<div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
</div> 

Die Schließen Text kopiert wird, wenn Benutzer doppelklicken Sie auf meine url-Ausgang div . Was kann man hier sehen:

<div class="modal-body"> 
    <div id="url-output"></div> 
</div> 

Relevantes Javascript unten. Full JS kann here angesehen werden.

$('#url-output').text("http://url.domain.me/" + data.shortID); 

So im Wesentlichen, wenn die url-Ausgabe Text so etwas wie "www.google.com" war, würde der kopierte Text lesen:

www.google.com

Schließen

Ich habe mehrere Lösungen versucht, z. B. das Deaktivieren von Zeigerereignissen und die Vorschläge here. Aber ich habe kein Glück.

Wie kann ich die schließen Text aus meinem Ausgang?

Answer 1

Sie können den Schaltflächentext über ein Pseudoelement entweder :before oder :after hinzufügen, um die Auswahl zu deaktivieren.

.my-button:before { 
 
    content: "Close"; 
 
}

Example <button class="my-button"></button>

Wenn Sie es brauchen eine bessere Zugänglichkeit zu haben, verwenden .sr-only Klasse, die mit Bootstrap eingebaut ist. Dies funktioniert, wenn nach der Schaltfläche kein Text mehr vorhanden ist.

.my-button:before { 
 
    content: "Close"; 
 
} 
 

 
/* http://getbootstrap.com/css/#helper-classes-screen-readers */ 
 
.sr-only { 
 
    position: absolute; 
 
    width: 1px; 
 
    height: 1px; 
 
    padding: 0; 
 
    margin: -1px; 
 
    overflow: hidden; 
 
    clip: rect(0, 0, 0, 0); 
 
    border: 0; 
 
}

Example <button class="my-button"><span class="sr-only">Close</span></button>