Solved

Getting the Tab Key to Indent in Textarea box

Posted on 2003-12-02
13
617 Views
Last Modified: 2010-04-09
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?
0
Comment
Question by:happydog234
  • 5
  • 4
  • 3
  • +1
13 Comments
 
LVL 31

Accepted Solution

by:
seanpowell earned 500 total points
ID: 9863723
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
 

Expert Comment

by:elvin226
ID: 9865430
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
 

Expert Comment

by:Nelson_Pires
ID: 9866361
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
VMware Disaster Recovery and Data Protection

In this expert guide, you’ll learn about the components of a Modern Data Center. You will use cases for the value-added capabilities of Veeam®, including combining backup and replication for VMware disaster recovery and using replication for data center migration.

 

Author Comment

by:happydog234
ID: 9867706
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
 

Expert Comment

by:Nelson_Pires
ID: 9869549
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
 
LVL 31

Expert Comment

by:seanpowell
ID: 9869596
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
 

Author Comment

by:happydog234
ID: 9870483
IE 5.5+ specific is fine.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9870683
Okay - so we'll leave it as is. It's the best option...
0
 

Author Comment

by:happydog234
ID: 9871451
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
 

Author Comment

by:happydog234
ID: 9871456
It does work seanpowell !

Nice!
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9871504
>>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
 

Expert Comment

by:Nelson_Pires
ID: 9874036
You are using CreateRange object, beware only IE can deal with it, NS will just ignore it at best.

Good luck.
0
 
LVL 31

Expert Comment

by:seanpowell
ID: 9874362
They mentioned already that IE 5.5+ specific is fine...
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Showing your events from Google Calendar in Google Maps Why? I travel all week and I thought it would be ideal if staff in office knew where I was based on my calendar. (OK real reason: my son wanted to see where I would be working, and I thoug…
This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

810 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question