javascript - Allow Tabbing in a contentEditable div with execCommand - Stack Overflow

admin管理员组

文章数量:1350125

I am making an application where I need for a contentEditable div to be allowed to have tabs in it. I have already figured out that it is really not possible to have to work correctly. So is there a way that on keyDown it adds the HTML code for a tab, which is

	

What I have so far is this

document.getElementById('codeline').contentEditable='true';
document.getElementById('codeline').onkeydown=function(e){
    if(e.keyCode==9){
        e.preventDefault();
        //document.getElementById('codeline').contentWindow.document.execCommand("InsertHTML",false,"	"); 
        //Thought this would work but it doesn't
    }
}

If anybody knows if there is a way to do this, or if that is the way and I am simply doing it wrong, please tell me! Thanks!

I am making an application where I need for a contentEditable div to be allowed to have tabs in it. I have already figured out that it is really not possible to have to work correctly. So is there a way that on keyDown it adds the HTML code for a tab, which is

	

What I have so far is this

document.getElementById('codeline').contentEditable='true';
document.getElementById('codeline').onkeydown=function(e){
    if(e.keyCode==9){
        e.preventDefault();
        //document.getElementById('codeline').contentWindow.document.execCommand("InsertHTML",false,"	"); 
        //Thought this would work but it doesn't
    }
}

If anybody knows if there is a way to do this, or if that is the way and I am simply doing it wrong, please tell me! Thanks!

• javascript
• jquery
• html
• dom
• contenteditable

Share Improve this question Follow edited Oct 8, 2011 at 18:49 u asked Oct 8, 2011 at 18:39 uu 92111 gold badge1111 silver badges2929 bronze badges 1

• possible duplicate of Tab key in contentEditable div – Ciro Santilli OurBigBook. Commented Jul 31, 2015 at 9:28

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

The HTML spec specifies that a TAB char should be treated as a single white space except for when it's contained inside a <pre> element.

The code that you posted above does work and it does insert a TAB char but it's just displayed by the browser as a white space. If you can put your entire editable content in a <pre> tag then your tabs will show up.

If you only want to use the tabs to indent content, you can also look into

execCommand('indent', false, null)

For future readers, perhaps a simpler solution is to just use the 'pre' white-space style. original post here.

white-space: pre;

"indent" mand, firefox wraps the selected text with blockquote element.
So one can define a margin-left or padding-left property for blockquote element to represent tabbing.
The "outdent" mand will remove the blockquote element and hence the styles.

本文标签： javascriptAllow Tabbing in a contentEditable div with execCommandStack Overflow