Getting the Tab Key to Indent in Textarea box

I've got a textarea box I'm using for an html powered CMS and I'm wanting to tab my code in all the time using the tab key, but using it moves the cursor from the text box.  I can't easily tab.

Any easy ways around this?  JS?
happydog234Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

seanpowellCommented:
This works for Ctrl-Tab, IE only...

copyright removed as per members agreement...

function CheckTab(el) {
  // Run only in IE
  // and if tab key is pressed
  // and if the control key is pressed
  if ((document.all) && (9==event.keyCode) && (event.ctrlKey)) {
    // Cache the selection
    el.selection=document.selection.createRange();
    setTimeout("ProcessTab('" + el.id + "')",0)
  }
}

function ProcessTab(id) {
  // Insert tab character in place of cached selection
  document.all[id].selection.text=String.fromCharCode(9)
  // Set the focus
  document.all[id].focus()
}
</SCRIPT>
<TEXTAREA ID=MyTabDemo ONKEYDOWN="CheckTab(this)" ROWS=20 COLS=20>
Try using CTRL-TAB inside of this textbox.
</TEXTAREA>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
elvin226Commented:
I went to this section to ask exactly the same question. And it's also the latest entry in the unanswered questions list! Thanks to happydog and georgemarian. :)
0
Nelson_PiresCommented:
Alternatively and to make it multi browser compatible, add a Text Link, say TAB, or a Image and when you click on it it will add the tab, here's the JS function for that:

function addTAB() {
      document.frmNAME.txtNAME.value += "    ";
      document.frmNAME.txtNAME.focus();
}

There's a little draw back to this, it will aways add the Tab to the end, I can give the more complete code where it adds the Tab where the cursor is, but it only works in IE.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

happydog234Author Commented:
Well seanpowell, it works fine.  So thanks.

But I'm going to hold off awardiung you points to see if I someone can figure out not having to use any key with tab, just tab.

0
Nelson_PiresCommented:
That would not be possible, because, Tab key by default changes the focus amongst all controls in the page, that's the default behaviour and can't be changed.
0
seanpowellCommented:
Hi happydog234,

We need to modify the initial keystroke to maintain user-accessibility. The only way to do it would potentially break the standard operating environment - so you'd correct one thing by corrupting another.

Given the general usage patterns of multiple keystrokes to perform an action (Ctrl-C) for instance, I don't believe adding the extra element would create any interface problems for the user....

Thanks,
georgemarian
0
happydog234Author Commented:
IE 5.5+ specific is fine.
0
seanpowellCommented:
Okay - so we'll leave it as is. It's the best option...
0
happydog234Author Commented:
seanpowell ,

I would agree you shouldn't break standard practice.  This CMS is only for me, on my own site, so I don't mind breaking it.

The above code with CTRL, can it be changed to just tab?
0
happydog234Author Commented:
It does work seanpowell !

Nice!
0
seanpowellCommented:
>>The above code with CTRL, can it be changed to just tab?
Absolutely - we just remove the additional CTRL keypress statement:

<html>
<head>
<script>
function CheckTab(el) {
  // Run only in IE
  // and if tab key is pressed

  if ((document.all) && (9==event.keyCode)) {
    // Cache the selection
    el.selection=document.selection.createRange();
    setTimeout("ProcessTab('" + el.id + "')",0)
  }
}

function ProcessTab(id) {
  // Insert tab character in place of cached selection
  document.all[id].selection.text=String.fromCharCode(9)
  // Set the focus
  document.all[id].focus()
}
</SCRIPT>
</head>
<body>
<form>
<TEXTAREA ID=MyTabDemo ONKEYDOWN="CheckTab(this)" ROWS=20 COLS=20>
Try using just the TAB inside of this textbox.
</TEXTAREA>
</form>
</body>
</html>
0
Nelson_PiresCommented:
You are using CreateRange object, beware only IE can deal with it, NS will just ignore it at best.

Good luck.
0
seanpowellCommented:
They mentioned already that IE 5.5+ specific is fine...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.