CODEWITHSUNDEEP
javascriptjquerygoogle-chrome
Xhynk
Xhynk

Reputation: 13890

jQuery's '.focus()' not behaving like I'd expect

So I've programmed some simple PHP "merge tags" for use in a form. I'd love for them to be 'clickable' to input into a text box.

I've got some basic code, that "works". It puts the merge tags in, and refocuses the box - but it puts the cursor behind anything you've typed, but in front of all the merge tags?

If I type:

[Howdy ]

and click on {firstname}, I get:

[Howdy {firstname}]

which is great!

But the cursor is between "howdy" and {firstname} like so:

[Howdy |{firstname}]

I've got a very simple fiddle set up to showcase what the issue is. I've been trying to use .val() and .focus() together

Upvotes: 2

Views: 123

Answers (2)

Travis J
Travis J

Reputation: 82337

jsFiddle Demo

Just adjust the text area's selectionStart variable like this:

$('#test')[0].selectionStart = $('#test').val().length;

Upvotes: 2

Explosion Pills
Explosion Pills

Reputation: 191819

Set the selectionStart property to the sum of the current selectionStart and the length of the string you are adding.

$("#test").prop('selectionStart', function (_, ss) {
    return ss + mtag.length;
});

http://jsfiddle.net/ExplosionPIlls/GCpvy/1/

Upvotes: 5

Related Questions