Question

Possible Duplicate:
How to handle <tab> in textarea?

I need a way to maintain tab levels in a textarea, so far this is what I have used:

<script type="text/javascript">
   $("textarea").keydown(function(e) {
      var $this, end, start;
      if (e.keyCode === 9) {
         start = this.selectionStart;
         end = this.selectionEnd;
         $this = $(this);
         $this.val(
            $this.val().substring(0, start)
            + "\t" + $this.val().substring(end)
         );
         this.selectionStart = this.selectionEnd = start + 1;
         return false;
      }
   });
</script>

But this only inserts tabs (I found this on another SO post so I don’t really know what it does as I’m not a JS expert )

Is there a way for those tabs to be there when I hit the return key? I need this because I am making a very simple code editor for my admin panel (no need for syntax highlight or anything) and it uses TextAreas.

Thanks!

Answer 1

I definitely don’t claim this to be a work of art, I threw it together in a matter of minutes. It will need some refining but should get you going in the right direction.

Global Variables

var keyPressed = null;
var timesPressed = 0;
var tabString = '';
var lastKeyPressed = null;

Edit — Added an important step to see if the user wants to break the tab set.

Dom ready functions

$(function(){
    $("textarea").keydown(function(e) {
        var $this, end, start;
        if (e.keyCode === 9 || e.which === 9) {
            start = this.selectionStart;
            end = this.selectionEnd;
            $this = $(this);
            $this.val(
               $this.val().substring(0, start)
               + "\t" + $this.val().substring(end)
            );
            this.selectionStart = this.selectionEnd = start + 1;
            keyPressed = e.keyCode || e.which;
            timesPressed = timesPressed +1;
            return false;
        }else if((e.keyCode === 13 || e.which === 13) && keyPressed === 9){
            start = this.selectionStart;
            end = this.selectionEnd;
            $this = $(this);
            tabString += '\t';
            $this.val(
            $this.val().substring(0, start)
                + "\r"+tabString + $this.val().substring(end)
            );
            this.selectionStart = this.selectionEnd = start + timesPressed +1;
            lastKeyPressed = e.keyCode;
            return false;          
        }else if((e.keyCode === 8 || e.which === 8) && lastKeyPressed === 9){
            keyPressed = null;   
            timesPressed = 0; 
            tabString = '';     
        }
    }); 
});​

Here’s a working jsFiddle

I didn’t really have a good chance to test it too much. Let me know if it’s too flaky and I’ll go back to reworking it.