Have you ever encountered a poor text selection solution? For instance, most web applications offer API keys that can be used by developers and when the key is offered in plain text format, it can be problematic to quickly copy & paste it into the console.

Let’s have a look at the example:

In Google Chrome, double-clicking the API key selects the “key” word that stands nearby.

What’s interesting, it works that way only when the API key starts with a letter. If it starts with a digit, the “key” word is not selected.

Here’s the HTML code of the example:

<dl>
  <dt>Login:</dt>
  <dd>b.olchowka@livechatinc.com</dd>
  <dt>Your API key:</dt>
  <dd>f109851029801928501</dd>
</dl>

You can easily fix the problem by wrapping the API key with a span element and styling it using display:block.

<dl>
<dt>Login:</dt>
<dd>b.olchowka@livechatinc.com</dd>
<dt>Your API key:</dt>
<dd>**<span class="select-fix">**f109851029801928501**</span>**</dd>
</dl>

**<style>
.select-fix {
	display: block;
}
</style>**

As a result, it is possible to easily copy & paste the API key in the console:

Another good way of dealing with the problem is to use a form element. If it does not mess with your design, you can put the API key inside an <input> element which handles copy & paste properly. MailChimp displays its API keys using this method:

Summary

Copy & paste seems to be an easy task. However, when you dive in the details, it stops being as simple as it sounds.

Always consider what actions a user must perform to reach the goal.