Using the Tab key for indentation?

[Decoman]

Is there any way to use the Tab key to create some kind of table like structure, where the words (spaced out with the Tab key) line up perfectly vertically?

Like this, where x = a word/name/sentence:
x x x x
x x x x
x x x x

Pressing the Tab key in say Wordpad work as intended, but in a forum post, I'm just tabbing myself out of the input area.

[Dog Cow]

That's one loss of having a web browser which allows one to tab to the next field. Consult your web browser or operating system documentation. This is not a phpBB problem.

[Decoman]

You seem to imply that the functionality I am looking for is possible.

So it seem pertinent to ask, if there is any way to create indentations somehow. Using the Tab key would seem natural, but perhaps there is some bbCode trick for what I am wanting here.

If it is not possible, I would appreciate to be told so. I am sure others might find this thread interesting as well, so I don't think I am posting a senseless support request.

[t27duck]

One option might be to have a custom BBCODE:

Code: Select all

[tab]

And have it output the HTML:

Code: Select all

     

Which would force 5 spaces for each one of those tab bbcodes.

[Decoman]

Ugh, digging through google searches I found a bbCode that seem to work. Not being into webdesign I had to just try stuff out, and the following appear to work as intended:

BBCode usage: [pre]{TEXT}[/pre]
HTML replacement: <pre style="font-family:'Lucida Grande','Trebuchet MS',Verdana,Helvetica,Arial,sans-serif;display:inline;">{TEXT}</pre>
Help line: Copy paste preformatted text between the tags

[Negaal]

Can be done.. like this http://romka.pri.ee/base/feedback can push multiple rows too..

Code: Select all

        $('textarea').focus(function(){
		$(this).keypress(function(e){
			checkTab(e);
		});
		return true;
	})
	$('textarea').blur(function(){
		$(this).unbind('keypress');
	})

this binding(using jquery library).. and next one handles pushing text

Code: Select all

// Thank you http://ajaxian.com/archives/handling-tabs-in-textareas
// Set desired tab- defaults to four space softtab
var tab = "	";

function checkTab(evt) {
    var t = evt.target;
    var ss = t.selectionStart;
    var se = t.selectionEnd;
    var oldscroll = t.scrollTop;

    // Tab key - insert tab expansion
    if (evt.keyCode == 9) {
        evt.preventDefault();

        // Special case of multi line selection
        if (ss != se && t.value.slice(ss,se).indexOf("\n") != -1) {
            // In case selection was not of entire lines (e.g. selection begins in the middle of a line)
            // we ought to tab at the beginning as well as at the start of every following line.
            var pre = t.value.slice(0,ss);
            var sel = t.value.slice(ss,se).replace(/\n/g,"\n"+tab);
            var post = t.value.slice(se,t.value.length);
            t.value = pre.concat(tab).concat(sel).concat(post);

            t.selectionStart = ss + tab.length;
            t.selectionEnd = se + tab.length;
        }

        // "Normal" case (no selection or selection on one line only)
        else {
            t.value = t.value.slice(0,ss).concat(tab).concat(t.value.slice(ss,t.value.length));
            if (ss == se) {
                t.selectionStart = t.selectionEnd = ss + tab.length;
            }
            else {
                t.selectionStart = ss + tab.length;
                t.selectionEnd = se + tab.length;
            }
        }
    }

    // Backspace key - delete preceding tab expansion, if exists
    else if (evt.keyCode==8 && t.value.slice(ss - 4,ss) == tab) {
        evt.preventDefault();

        t.value = t.value.slice(0,ss - 4).concat(t.value.slice(ss,t.value.length));
        t.selectionStart = t.selectionEnd = ss - tab.length;
    }

    // Delete key - delete following tab expansion, if exists
    else if (evt.keyCode==46 && t.value.slice(se,se + 4) == tab) {
        evt.preventDefault();

        t.value = t.value.slice(0,ss).concat(t.value.slice(ss + 4,t.value.length));
        t.selectionStart = t.selectionEnd = ss;
    }

    // Left/right arrow keys - move across the tab in one go
    else if (evt.keyCode == 37 && t.value.slice(ss - 4,ss) == tab) {
        evt.preventDefault();
        t.selectionStart = t.selectionEnd = ss - 4;
    }
    else if (evt.keyCode == 39 && t.value.slice(ss,ss + 4) == tab) {
        evt.preventDefault();
        t.selectionStart = t.selectionEnd = ss + 4;
    }

    t.scrollTop = oldscroll;
}