Select all text in textbox when label is clicked

Question

I am using label for attribute for input elements in my website that will help blind users.

Currently when user click on label, the corresponding input is getting activated. That means if there is textbox for name, then cursor will go in the start of textbox.

For example, if name in textbox is "John", then on click label, cursor will enter in textbox and will show before "John".

But what I want is that it should select "John". That means text of textbox should be selected.

Can anyone help me how I can implement this?

My code is shown below:

<div class="editor-label"> <label for="ContactName">*Name</label> </div> <div class="editor-field"> <div> <input id="ContactName" maxLength="40" name="ContactName" type="text" value="John" /> </div> </div>

MrMarlow · Accepted Answer · 2015-07-03 07:36:35Z

3

I am unsure if you can achieve this by just using html/css, so it's very likely that you need to use a JS lib, such as jQuery.

By using jQuery, you can use the select() method when the label is clicked, using something like this;

$(function() { $('label').click(function() { var id = $(this).attr('for'); $('#'+id).select(); }); });

A working example can be found here: http://jsfiddle.net/sf3bgwxr/

answered Jul 3, 2015 at 7:36

MrMarlow

8564 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

zgood Over a year ago

Wow thats weird.... we posted the exact same answer lol. I will delete mine.. you were quicker on the draw

Jayababu Over a year ago

Select is an event which will fire on selecting text.I dont think it will be used to select text..@MrMarlow

user4956321 Over a year ago

Thank you for your reply. But I want to prefer CSS, if possible?

user4956321 Over a year ago

@MrMarlow. Thank you dude. Finally I fixed using your solution. Now one another issue. Can u please look for this: stackoverflow.com/questions/31203636/…

MrMarlow Over a year ago

@Jayababu - I provided a jsFiddle to show it working. It does work for this.

|

Collectives™ on Stack Overflow

Select all text in textbox when label is clicked

1 Answer 1

6 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Linked

Related