Tap to Select

It can be considered user-friendly when a site owner provides a link or button to select the content of a div. Especially when the content is presented as one that may or should be copied. With a link or button to tap, the user doesn't have to manually select the content.

The JavaScript you'll find further below needs to be available in the source code of your web page. With the JavaScript in place, you can make a link or a button to select the content of a div. The link or button lets the JavaScript know which div content to select.

Other HTML elements with content can also be selected that way. More about that is further down the article.

Below is a div with content. Tap this link to select the content in the div. Both the text and the image will be selected. Alternatively, you can for the same result.

On the left is the current Willmaster logo. It has been in use since 2008. The "W" stands for Will. The "M" stands for Mari. And the "B" stands for Bontrager. The circle represents a team.

To implement the Tap to Select feature, the following JavaScript needs to be accessible on your web page. It can be anywhere in the source code of your page. At the bottom, just above the cancel </body> can be a good place.

<script type="text/javascript">
function HTMLelementContentToSelect(id)
{
   var theid = document.getElementById(id);
   if(document.selection)
   {
      document.selection.empty(); // First, unselect, then select
      var range = document.body.createTextRange();
      range.moveToElementText(theid);
      range.select();
   }
   else if(window.getSelection)
   {
      window.getSelection().removeAllRanges(); // First, unselect, then select
      var range = document.createRange();
      range.selectNode(theid);
      window.getSelection().addRange(range);
   }
}
</script>

For completion, here is the source code for the above demonstration. It can be copied and pasted into your own test web page. (Notes follow.)

<p>
Below is a div with content. <a href="javascript:HTMLelementContentToSelect('first_example_div')">Tap this link</a> to select the content in the div. Both the text and the image will be selected. Alternatively, you can <input type="button" onclick="HTMLelementContentToSelect('first_example_div')" value="Tap this button"> for the same result.
</p>

<div id="first_example_div" style="border:6px double gray; border-radius:1em; padding:1em;">
<div style="float:left; margin-right:1em;"><img src="https://www.willmaster.com/images/wmlogo_icon.gif"></div>
On the left is the current Willmaster logo. It has been in use since 2008. The "W" stands for Will. The "M" stands for Mari. And the "B" stands for Bontrager. The circle represents a team.
<div style="clear:left;"></div>
</div>

<script type="text/javascript">
function HTMLelementContentToSelect(id)
{
   var theid = document.getElementById(id);
   if(document.selection)
   {
      document.selection.empty(); // First, unselect, then select
      var range = document.body.createTextRange();
      range.moveToElementText(theid);
      range.select();
   }
   else if(window.getSelection)
   {
      window.getSelection().removeAllRanges(); // First, unselect, then select
      var range = document.createRange();
      range.selectNode(theid);
      window.getSelection().addRange(range);
   }
}
</script>

Notes —

The call to the JavaScript HTMLelementContentToSelect() function requires the id value of the div or other HTML element with content to select.

Here is the format.

HTMLelementContentToSelect(ID_OF_DIV)

In the illustration, first_example_div is the id value of the div.

In the source code of the illustration, you'll see first_example_div in three places within the code.

1. In the text link.
2. In the button code.
3. Assigned to the div itself.

The text link and the button are two ways that can be employed for selecting content in a div or other HTML element like span, td, or pre. (Other ways that can be employed for selecting content in a div, not addressed in this article, include on page load, on mouseover, on click, and when the mouse moves.)

For reference, here is the source code for the link and button methods (extracted from the above example source code):

<a href="javascript:HTMLelementContentToSelect('first_example_div')">tap this link</a>
<input type="button" onclick="HTMLelementContentToSelect('first_example_div')" value="tap this button">

A note about form fields: Selection of form field content (text input and textarea fields) would be handled differently, using different JavaScript. It is outside the scope of this article but needed to be mentioned for completion.

Any HTML element that contains content, except form fields, can be selected with a link or button that you learned how to do in this article. The JavaScript provided in the article must be available on the web page where the div and the link or button are located.

(This content first appeared in Possibilities newsletter.)

Will Bontrager