Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Monday, February 4, 2013

How To Highlight All TextArea Content Using CSS?

This Article Was Live On: Monday, February 4, 2013 And Till Now Have2 comments.
How To Highlight All TextArea Content Using CSS?

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.

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.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



2 comments :

  1. this is indeed very useful.thanks for revealing the secret buddy. :)

    ReplyDelete
    Replies
    1. You Are Welcome To Visit Us...
      Be With Us To Get More...

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.