Find position of cursor in textarea

Question

Why isn't this code working?

http://sandbox.phpcode.eu/g/5db40.php

<form> <textarea></textarea> </form> <script> $(function(){ $("textarea").keydown(function(e){ if (e.keyCode == 9){ $("textarea").selectionStart.append(" "); e.preventDefault(); } }); }); </script>

You have to press TAB on textarea

Problem is that it doesn't do/append four spaces and it does default browser action (switch to adress tab in Chrome)

Thoughts?

Observation: even Stack Overflow's textareas, which generally contain code that is indented, don't allow tabs. — Devin Burke
– Devin Burke, Commented Aug 5, 2011 at 17:46
@genesis: I don't know exactly. I haven't tried to do it myself. But my comment was suggesting that maybe it isn't feasible. — Devin Burke
– Devin Burke, Commented Aug 5, 2011 at 17:52

Community · Accepted Answer · 2017-05-23 12:23:20Z

Related to this question, try:

$(function () { $("textarea").keydown(function (e) { if (e.keyCode == 9) { e.preventDefault(); var $this = $(this); var pos = $this[0].selectionStart; $this.val($this.val().substring(0, pos) + " " + $this.val().substring(pos)); $this.setCursorPosition(pos + 4); } }); });

And add the JQuery from this post.

new function($) { $.fn.setCursorPosition = function(pos) { if ($(this).get(0).setSelectionRange) { $(this).get(0).setSelectionRange(pos, pos); } else if ($(this).get(0).createTextRange) { var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select(); } } }(jQuery);

Thats probably because append is not a javascript string function. Try the old string = string + 'extra stuff'; approach.
but this appends these spaces at the end. I want it to the actual position of pointer
still switching to my address bar tsandbox.phpcode.eu/g/81281.php
Thats because the javascript had an error. Please see the corrections.
works, but not as I wanted. It appends tab to the end, not to actual pointer position

Tim Down · Accepted Answer · 2011-08-06 11:35:57Z

For manipulating textarea selections and caret positions in jQuery, I recommend using my jQuery plug-in for doing this, which work in all major browsers and provides methods for getting and setting the caret/selection position, inserting content at the caret position and more. The code you want would be:

$("textarea").keydown(function(e) { if (e.keyCode == 9) { e.preventDefault(); $(this).replaceSelectedText(" "); } });

Community · Accepted Answer · 2017-05-23 12:07:34Z

0

Take a look at Keypress in jQuery: Press TAB inside TEXTAREA (when editing an existing text)

edited May 23, 2017 at 12:07

CommunityBot

11 silver badge

answered Aug 5, 2011 at 17:47

janhartmann

15k17 gold badges89 silver badges142 bronze badges

Comments

Pawan Choudhary · Accepted Answer · 2011-08-05 18:12:38Z

Try this one, i'm damn sure it will work.

 <form> 
 <textarea></textarea> 
</form> 
<script> 
$(function(){ 
 $("textarea").keydown(function(e){ 
 if (e.which == 9){ 

 $("textarea").append(" "); 
 return false;
 } 
 }); 
}); 
</script>

I just simply changed the word "keyCode" to "which", 'cause the word keyCode is derived from jquery ui.

Kindly, check my code again, i did a little modification again, it's working fine for me in all browsers now.

Chris Forrence · Accepted Answer · 2012-12-12 19:46:34Z

var range = $(this).get(0).createTextRange(); range.collapse(true); range.moveEnd('character', pos); range.moveStart('character', pos); range.select();

This (JSFiddle) was the best I could manage, but I can't get it working on Firefox or Chrome. If somebody manages to get the button press select text in textarea with Chrome working, feel free to let me know.

Collectives™ on Stack Overflow

Find position of cursor in textarea

5 Answers 5

7 Comments

Comments

Comments

1 Comment

Comments

Linked

Hot Network Questions