How to handle <tab> in textarea?

Question

I would like a textarea that handles a situation of pressing tab key.

In default case if you press a tab key then focus leaves the textarea. But what about the situation when user wants to type tab key in textarea?

Can I catch this event and return focus to the textarea and add a tab to a current cursor position?

Answer 1

You can: http://jsfiddle.net/sdDVf/8/.

---

$("textarea").keydown(function(e) {     if(e.keyCode === 9) { // tab was pressed         // get caret position/selection         var start = this.selectionStart;         var end = this.selectionEnd;          var $this = $(this);         var value = $this.val();          // set textarea value to: text before caret + tab + text after caret         $this.val(value.substring(0, start)                     + "\t"                     + value.substring(end));          // put caret at right position again (add one for the tab)         this.selectionStart = this.selectionEnd = start + 1;          // prevent the focus lose         e.preventDefault();     } }); 

Answer 2

Here is a modified version of pimvdb's answer that doesn't need JQuery:

document.querySelector("textarea").addEventListener('keydown',function(e) {     if(e.keyCode === 9) { // tab was pressed         // get caret position/selection         var start = this.selectionStart;         var end = this.selectionEnd;          var target = e.target;         var value = target.value;          // set textarea value to: text before caret + tab + text after caret         target.value = value.substring(0, start)                     + "\t"                     + value.substring(end);          // put caret at right position again (add one for the tab)         this.selectionStart = this.selectionEnd = start + 1;          // prevent the focus lose         e.preventDefault();     } },false); 

I tested it in Firefox 21.0 and Chrome 27. Don't know if it works anywhere else.