Question

20

Make the Tab key Insert a tab character in a contentEditable div and not blur

rated 0 times [ 21] [ 1] / answers: 1 / hits: 22488 / 15 Years ago, wed, february 10, 2010, 12:00:00

I'm building a simple text editor by setting contentEditable=true on a div (anyway i think that textarea behaves in the same way) and i have some problems with the tab key.

What i want is that when the user presses the tab key, the focus remain on the div and a tab character is added to the text.

I've solved the first part of the problem by calling preventDefault() on the event object on keydown and now the div doesn't lose the focus, but i don't know why i can't insert the character.

The entity code for the tab char is 	 but if i try to add this string to the innerHTML Firefox replace it with a simple space (not   just a white space). I also tried with t but the result is the same.

So my question is, how can I insert a tab character in the text?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

blair

Add To Favorites

Follow

Total Points: 384

Total Questions: 108

Total Answers: 86

Location: Northern Ireland

Member since Tue, May 5, 2020

4 Years ago

answered 15 Years ago kamronr · Accepted Answer

The reason why you only see a simple space is because sequences of whitespace characters (except non-breaking spaces) are treated as a single space character inside divs. If you want the tab character to display in the way you expect you'll need to put it inside something like a <pre> element that renders whitespace as it is in the source HTML, or inside an element with white-space: pre set via CSS.