Question

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

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

当用户双击我的 url-output div时，正在复制关闭文本。这可以在这里看到：

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

下面的相关Javascript。可以查看完整的JS here。

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

基本上，如果 url-output 文本类似于“www.google.com”，则复制的文本将显示为：

www.google.com

关闭的

我尝试了几种解决方案，例如禁用指针事件和建议here。但我没有运气。

如何从输出中排除关闭文字？

Answer 1

您可以使用:before或:after通过伪元素添加按钮文字以禁用选择。

＆＃13;

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

＆＃13;

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

＆＃13;

如果您需要它具有更好的可访问性，请使用内置于Bootstrap的.sr-only类。如果按钮后面没有任何文字，则此方法有效。

＆＃13;

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

＆＃13;

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

＆＃13;

防止从<button>元素中选择文本

1 个答案: