How to auto-highlight text input after setting .val()?

Question

I'm trying to dynamically set some text in an input field, and then display it, and finally auto-highlight/auto-select it.

If I don't use .val() and instead use value="something" hardcoded on the input it works perfectly.

If I add .val() to the method chain, it just puts the cursor in the box but doesn't highlight the text.

Any idea how I might do this?

In the example below, $(this) refers to the link they click on "Rename" which causes inline edit box to appear. The .next() refers to the input.

$(this).hide().next().val(oldName).show().focus();

When the input is focused, I want it to be as if they hit command+A or control+A — Tallboy, Jan 03 '13 at 05:08
I would say please give some fiddle to help you even better. — ameya rote, Jan 03 '13 at 05:11
have a look at [link]http://stackoverflow.com/questions/480735/select-all-contents-of-textbox-when-it-receives-focus-javascript-or-jquery — Carl, Jan 03 '13 at 05:13

Popnoodles · Accepted Answer · 2013-01-03T05:14:45.680

1

$(this).hide().next().val(oldName).show().focus().select();

if that's the moment you want it to happen. It will apply to the .next() element, not $(this) but since you've hidden $(this) it's probably what you're after.

edited Jan 03 '13 at 05:14

answered Jan 03 '13 at 05:09

Popnoodles

28,090
2
45
53

.select() worked, thanks :) I cant mark this as the answer yet, but I will – Tallboy Jan 03 '13 at 05:11

How to auto-highlight text input after setting .val()?

1 Answers1