Use AJAX to keep tabs in textarea?

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!

The SO post to which he is referring: [How to handle in textarea?](http://stackoverflow.com/questions/6140632/how-to-handle-tab-in-textarea) — Cᴏʀʏ, Oct 18 '12 at 01:09
@Cory if it has nothing to do with AJAX then what is it? Just wondering! — user115422, Oct 18 '12 at 01:31
This is just a JavaScript problem. AJAX = Asynchronous JavaScript and XML, which is a client-server communication technology. — Cᴏʀʏ, Oct 18 '12 at 03:16

score 1 · Accepted Answer · answered Oct 18 '12 at 01:33

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.

@MuqMan you simply use this over the existing code that you have. Should do the trick, check the fiddle and let me know. — Ohgodwhy, Oct 18 '12 at 01:37
wait global vars go BEFORE the rest of the code right, sorry if it sounds too newbie :) — user115422, Oct 18 '12 at 01:43
umm. its not working on my site, nor is the original code posted, here's a sample page: http://pamzam.zapto.org/admin/tab (ignore the admin part, thats just there because Im working on an admin section) — user115422, Oct 18 '12 at 01:45

Use AJAX to keep tabs in textarea?

1 Answers1