1

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>

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>

Relevant Javascript below. Full JS can be viewed here.

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

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

www.google.com

Close

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

How can I exclude the Close text from my output?

Community
  • 1
  • 1
user3335607
  • 218
  • 2
  • 11

1 Answers1

4

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>

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>
Stickers
  • 63,307
  • 17
  • 114
  • 156