Tab to Spaces

DreXor · May 7, 2004

i have a form i put together to to minor fixes on pages in my web, mostly for when i'm out of office, i can edit what needs to from afar without ftp or special tools...

but the problem i have is in the form i have a text area, current i have a event.keypress trap for TAB and basically have disabled it so pressing tab doesn't spit you out of the textarea. is there a way to translate/replace/return the tab key with say 4 spaces?

LFI · May 7, 2004

The following small example works for me in IE6. It merely adds 4 spaces to the current value of the textarea when the TAB is caught.

Code:

<html>
<head>
<script>
function tabCatch()
{
 if(event.keyCode == 9)
 {
  ta.value += "    ";
  return false;
 }
 else
  return true;
}
</script>
</head>
<body>
<textarea name='ta' onkeydown='return tabCatch()' rows='30' cols='50'></textarea>
</body>
</html>

'hope that helps.

--Dave

adam0101 · May 7, 2004

IE only...

This will add four spaces where the cursor is:

Code:

<script language="javascript">
<!--

function HandleKeyDown(obj) {
   var tabKeyCode = 9;
   if (event.keyCode == tabKeyCode && event.srcElement == obj) {
      obj.selection = document.selection.createRange();
      obj.selection.text = "    ";
      event.returnValue = false;
   }
}

//-->
</script>

<textarea onkeydown="HandleKeyDown(this);"></textarea>

And this will add a tab where the cursor is:

Code:

<script language="javascript">
<!--

function HandleKeyDown(obj) {
   var tabKeyCode = 9;
   if (event.keyCode == tabKeyCode && event.srcElement == obj) {
      obj.selection = document.selection.createRange();
      obj.selection.text = String.fromCharCode(tabKeyCode);
      event.returnValue = false;
   }
}

//-->
</script>

<textarea onkeydown="HandleKeyDown(this);"></textarea>

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

DreXor · May 7, 2004

Adam, with the first script you supplied, is there anyway to make the cursor to not dissapear?

ps thanks alot guys for the help, i'm currently fishing through making resizeable columns in html tables without applets

got pretty good progress so far if you'd like a copy..

codeone · May 7, 2004

could throw a select code in there..

______________________________________________________________________________
"The sluggard does not plow after the season, so he begs during the harvest and has nothing."
-[Proverbs 20:4]

adam0101 · May 8, 2004

Hmm, not that I know of. The cursor doesn't disappear for me. I'm using IE6.0

Adam
while(ignorance){perpetuate(violence,fear,hatred);life=life-1};

DreXor · May 8, 2004

weird. mine dissapears, i thought it was just cause of the insert, but when i tried to type it was in blurred space

LFI · May 9, 2004

DreXor,

What browser are you using? Have you tried my method? I'd be curious if it works for you. I too have IE6.

--Dave

DreXor · May 9, 2004

i use ie6 as well

LFI · May 9, 2004

...and the method I proposed (see above) didn't do what you wanted?

--Dave

DreXor · May 9, 2004

Lookingforinfo, no sorry cause that just appends it to the end, i'm looking for mid string editing.

the other works, just the caret blurs

BillyRayPreachersSon · May 9, 2004

Have you tried adding "obj.focus();" to the end of your JavaScript function? If you do, you'll also have to add a tabindex to the textarea - anything greater than 0 will do.

Hope this helps,
Dan

vongrunt · May 10, 2004

Or event.cancelBubble = true; ?

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Tab to Spaces

DreXor

Programmer

LFI

Programmer

adam0101

Programmer

DreXor

Programmer

codeone

Programmer

adam0101

Programmer

DreXor

Programmer

LFI

Programmer

DreXor

Programmer

LFI

Programmer

DreXor

Programmer

BillyRayPreachersSon

Programmer

vongrunt

Programmer

Similar threads

Part and Inventory Search

Sponsor