After previous article about “How To Highlight All TextArea Content Using JavaScript Button?” Today the question is that “How To HighlightAll/Select All TextArea Content/Data Using HTML+CSS+DOM Through One-Click, Double-Click, Button-Click Or OnText-Click?” Many websites use this little JavaScript functionality. It enables you to give a user the option of selecting or highlighting all text within a textarea element of an HTML form, just by clicking on something as opposed to dragging their mouse over the text to highlight it.
It is primarily used in the event where people are expected to copy and paste code off of your website. It uses the focus() and select() methods to bring focus to the field, then select it. Now many bloggers and webmasters are sharing some codes and long text to copy so they wrapped up it in a textarea to save the page length and allow there visitor to copy it.
Now if visitor try to copy it, first it have to highlight for that it have to click his mouse button and drag from toe to end then right click to copy that will lead the visitor mouse button to end of it’s life and a loss of accessories, So from this code your visitor have twin benefits first there accessories are safe and second there time is also safe. So add it and help your visitor to copy your data.
Some guy’s think that textarea will distrub there template that it is resizable and also editable so there user can add some extra words in there codes textarea and then reply him that there codes is wrong so for that purpost, you have to convert your text area like a DIV that is so easy. Read out our previous post that How To Customized A TextArea? Now without any more preface just jump to the code with haveing and eye of features and a lve demo also.
Table of Contents
Features:
1.) No Script Tag.
2.) Pure CSS With HTML DOM Effect.
3.) One Click Highlight , Two Click Highlight , Button Click Highlight Function.
4.) 3 Awesome Codes To Select All TextArea Content.
5.) Simple And Fully Customizable.
6.) Cross Browsers Function.
7.) form Tag Highlight Also Added.
How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Layout“.
4.) Click “Add A Gadget” Where You Want To Add It.
5.) Now Scroll To “HTML-JAVASCRIPT“
6.) Click “+” Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.
How To Add In Website?
1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.
Option 1:
<textarea rows='10' cols='50' id='exe' >
Your Desired Text To Be Highlight By Button Click.
</textarea>
<br />
<input onmouseup="document.getElementById('exe').select()" value="Click To Select" type="submit" />
Option 2:
<textarea rows="10" cols="50" onclick="this.focus();this.select()">
Your Desired Text To Be Highlight By Button Click.
</textarea>
Option 3:
<form name="form">
<textarea name="exe" rows="4" cols="44" >
Your Desired Text In form Tag TextArea To Be Highlight By Button Click.
</textarea>
<br />
<input onClick="javascript:this.form.exe.focus();this.form.exe.select();" value="Click To Select" type="submit" />
</form>
Customization:
1.) You Can Change onClick To onDblClick If You Want To Click Twice To Highlight.
2.) You Can Add Desired #id .class For Your CSS.
3.) You Can Also Highlight On TextArea Click.
4.) Save And Done.
![[SOLVED]-Alibaba-Cloud-DirectMail-Domain-Ownership-Verification-Failed](https://www.exeideas.com/wp-content/uploads/2023/09/SOLVED-Alibaba-Cloud-DirectMail-Domain-Ownership-Verification-Failed-300x150.jpg)
this is indeed very useful.thanks for revealing the secret buddy. 🙂
You Are Welcome To Visit Us…
Be With Us To Get More…