禁止从< button>选择文本元素 [英] Prevent text selection from <button> element

问题描述

在我的HTML中，我有一个位于div中的按钮:

In my HTML I have a button located in a div:

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

当用户双击我的 url-output div时，将复制 Close 文本.可以在这里看到:

The Close text is being copied when users double-click my url-output div. Which can be seen here:

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

下面的相关Javascript.可以在此处查看完整的JS.

Relevant Javascript below. Full JS can be viewed here.

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

因此，从本质上讲，如果 url-output 文本类似于"www.google.com"，则复制的文本将显示为:

So essentially, if the url-output text was something like "www.google.com", the copied text would read:

www.google.com

关闭

我尝试了几种解决方案，例如禁用指针事件和建议

I've attempted several solutions, such as disabling pointer events, and the suggestions here. But I'm having no luck.

如何从输出中排除 Close 文本?

How can I exclude the Close text from my output?

推荐答案

您可以通过使用:before 或:after 禁用的伪元素来添加按钮文本选择.

You can add the button text via a pseudo element either using :before or :after to disable the selection.

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

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

如果需要更好的可访问性，请使用Bootstrap内置的 .sr-only 类.如果按钮后没有任何文字，则可以使用此功能.

If you need it to have a better accessibility, use .sr-only class that is built-in with Bootstrap. This works if there isn't any text after the button.

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

这篇关于禁止从< button>选择文本元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！