防止文本選擇從<button>元素

在我的HTML我有位於一個div一個按鈕：防止文本選擇從<button>元素

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

的關閉文字被複制時，用戶雙擊我網址輸出 DIV 。這可以在這裏看到：

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

下面相關的JavaScript。完整的JS可以被看作here。

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

所以基本上，如果網址輸出文本是像「www.google.com」，將複製的文本內容如下：

www.google.com

關閉

我嘗試了幾種解決方案，比如禁用指針事件，以及建議here。但我沒有運氣。

如何排除從我的輸出中關閉文本？

來源

2017-01-05 user3335607

您可以通過使用:before或:after的僞元素添加按鈕文本以禁用選擇。

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

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

如果你需要有一個更好的可訪問性，請使用內置自舉類.sr-only。如果按鈕後面沒有任何文字，這將起作用。

.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>

來源

2017-01-05 00:28:55 Stickers

防止文本選擇從<button>元素

回答

相關問題