javascript - Find position of cursor in textarea - Stack Overflow

admin管理员组

文章数量:1406001

Why isn't this code working?

.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?

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?

• javascript
• jquery
• google-chrome

Share Improve this question Follow asked Aug 5, 2011 at 17:43 genesisgenesis 51k2020 gold badges9898 silver badges126126 bronze badges 3

• Observation: even Stack Overflow's textareas, which generally contain code that is indented, don't allow tabs. – Devin Burke Commented Aug 5, 2011 at 17:46
• possible duplicate of Capturing TAB key in text box – Marc B Commented Aug 5, 2011 at 17:48
• @genesis: I don't know exactly. I haven't tried to do it myself. But my ment was suggesting that maybe it isn't feasible. – Devin Burke Commented Aug 5, 2011 at 17:52

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 3

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);

For manipulating textarea selections and caret positions in jQuery, I remend 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("    ");
    }
});

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

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.

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.

本文标签： javascriptFind position of cursor in textareaStack Overflow