This demo uses elementals.js
_.Node.addSelectButton method to show how quickly and easily a "select contents" button can be added to a page.
Used in its simplest form, _.Node.addSelectButton will insert the button tag before the element you send to it. In our example we have a paragraph with the id of test1 on it. The code to add the button before the paragraph is simply:
_.Node.addSelectButton( document.getElementById('test1') );
That's it. A
button tag containing the word "select" is inserted before that paragraph, and when you click on it, the contents of that paragraph is selected just like you clicked and dragged the mouse over it.
This elementals.js object method can also be passed additional parameters to set the text inside the button tag, an element you wish to put the button inside or around, and where you wish to place it. The default placement behavior is "before" but you can pass any placement value valid for the _.Node.write method.
In the example we have a
H2#complexTestHeader and a
_.Node.addSelectButton( document.getElementById('test2'), 'Select text in box below', document.getElementById('complexTestHeader'), 'last' );
The first parameter being what to select, the second being the text to put inside the button, the next parameter being what element to target for the placement of the button, and "last" meaning to place the new button on the DOM as the lastChild of that h2.