simple textarea string replace jquery script

Question

I'm trying to make some simple jquery script that replaces a specific string in the textarea. I've got this know:

$("textarea").bind("keyup", function() { var text = $(this).val(); text = text.replace(/,,/g, "′"); $(this).val(text); });

This replaces ,, into the unicode symbol ′. This works, except that the cursors position moves to the last character of the textarea everytime there is a replacement. I want that the cursors goes just after the ′ when there is a replacement. How could I do this ?

Here is my jsfiddle: http://jsfiddle.net/zvhyh/

Edit: thanks for the help guys. I use this now: http://jsfiddle.net/zvhyh/14/

possible duplicate of update textarea value, but keep cursor position — adeneo
– adeneo, Commented Nov 26, 2013 at 15:43
I would check this out: stackoverflow.com/questions/263743/… — MonkeyZeus
– MonkeyZeus, Commented Nov 26, 2013 at 15:44
Looks like a duplicate of set cursor to specific line in a textarea as well — Scott Mermelstein
– Scott Mermelstein, Commented Nov 26, 2013 at 15:47

Pedro Estrada · Accepted Answer · 2013-11-26 15:53:16Z

Here is my take on it:

http://jsfiddle.net/zvhyh/11/

$("textarea").bind("keyup", function() { var cursorPosition = $('textarea').prop("selectionStart"); var text = $(this).val(); if (text.indexOf(',,') > -1) { text = text.replace(/,,/g, "′"); $(this).val(text); $('textarea').prop("selectionStart", cursorPosition - 1); $('textarea').prop("selectionEnd", cursorPosition - 1); } });

Abhitalks · Accepted Answer · 2013-11-26 16:00:20Z

Here is your updated fiddle: http://jsfiddle.net/zvhyh/10/

The key is to use selectionStart to get the current position of cursor and setSelectionRange to place the cursor in that position later on.

// get current cursor position var pos = $(this).val().slice(0, this.selectionStart).length; // replace the text $(this).val($(this).val().replace(/,,/g, "′")); // reset the cursor position this.setSelectionRange(pos, pos);

Hope that helps.

Update:

Because two characters are being replaced by one character, in the above code the cursor position will skip one character to right. One workaround is to first check if a ",," combo is there, and then use the position as one character before.

Updated fiddle: http://jsfiddle.net/zvhyh/13/

if (text.indexOf(",,") > 0) { ... pos--; ..

Now it moves one character too much to the right. If I type ,, somewhere not on the end of the textarea.
I like the simplicity of this method tough. When I do pos-1 I get very weird things.

Collectives™ on Stack Overflow

simple textarea string replace jquery script

2 Answers 2

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Linked

Related