Forum Moderators: open

Message Too Old, No Replies

type a tab character in a text area?

         

Purple Martin

1:21 am on Jan 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



How can I type a tab character in a text area? I was expecting something like CTRL+Tab but I can't find a key combination that works. Presumably this is browser and/or platform dependant behaviour: I'm interested in IE6 on XP only (for a corporate environment).

zollerwagner

9:19 am on Jan 31, 2005 (gmt 0)

10+ Year Member



I'm pretty sure that there are no tabs in HTML or XHTML.

There may be other ways to get the same appearance, though. For example, if you want to indent the first line of a paragraph, you can use text-indent in css.

There are also ways to create a hanging indent effect with css.

One place the Tab key is used is in moving from form field to form field on a web page. You can set the tab order for fields, too.

Hope that helps.

lammert

10:22 am on Jan 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



There is a tab in HTML, but only inside the <pre></pre> element. You could use code like this:

<pre class="myown">
Name[[tab]]Age
Ann[[tab]]23
</pre>

Replace [[tab]] with the normal tab key on your keyboard. Normaly, <pre> uses a fixed character font like Courier, but if you add a font definition to the myown class in your CSS file, it will show up like normal text, only with tabs enabled.

zollerwagner

10:43 am on Jan 31, 2005 (gmt 0)

10+ Year Member



Interesting. I didn't know that. I also didn't realize that <pre> could be used with non-monospace fonts. Thanks for the tips.

I try to design to the current web standards, so I wouldn't use <pre> like that. Anyway, since you'd have to use CSS, there are more direct ways to get the same effect, don't you think?

lammert

10:59 am on Jan 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



I do not use <pre> for formatting or tab displaying, only to display programming examples. That the tab works is a nice feature which makes it possible to copy and paste my source code without worrying to convert tabs to spaces. With variable width fonts you might see a variable tab width though. I didn't test thoroughly.

The question was if there was a tab in HTML and yes, there is. And for a quick solution for a limited set of users it can be used. Personally I use CSS or tables for all formatting because it gives you so much more freedom like:

  • Left, center or right adjustment on any column, not just left
  • No problems if the length difference between texts is more than eight characters
  • Wordwrap within columns
  • Different fonts in different columns.

For such a known user base it might be a also a solution to use MS Word, and save the document as HTML. MS Word adds a lot of formatting codes to the HTML to assure that the layout is fixed. In this way you can use different fonts etc. I wouldn't use MS Word as your default HTML generator though, because it output reeeaaalllllly a lot if garbage. Small text will easily expand to 100k or more.

encyclo

2:54 pm on Jan 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I think you're missing Purple Martin's point - I think he needs to be able to type in a tab space within a textarea.

I've dug around a bit, and found this snippet of Javascript which should work (I've not tested it) in IE6:

<script type="text/javascript">
function doTab()
{
var e = window.event;
if (e.keyCode == 9) // tab
{
e.srcElement.value = e.srcElement.value + "\t";return false;
}
return true;
}
</script>

Then add to the textarea tag:

<textarea name="whatever" rows="20" cols="75" onkeydown="return doTab();">

Is that more what you're looking for?

moltar

3:05 pm on Jan 31, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I usually copy and paste it from some other document. It's silly, but works :)

Purple Martin

11:00 pm on Feb 1, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



encyclo, that's exactly the kind of thing I was after, thanks.

(And the discussion about <pre> was also interesting to read).

EDIT:

Adding a focus to the function makes the cursor stay in the text area as you type, which is more useful:

function doTab() {
var e = window.event;
if (e.keyCode == 9) {
e.srcElement.value = e.srcElement.value + "\t";
e.srcElement.focus()
return false;
}
return true;
}