TAB functionality in SE when editing code -- What's the UX view on it?

Question

Disclaimer: I'm cross-posting this question from Meta SE to get input from the UX fanatics here.

---

I've seen people complain about not been able to use TAB to format code in SE. There are many fixes such as:

• format code in a text editor, then insert
• use CTRL + K
• use SPACE x 4 newb

The request to implement tab formatting functionality has been denied by SE, and refuted on the claim that this would damage TAB's native functionality in the browser.

As a developer who focuses on UX, I disagree, on the grounds that I believe that when editing code, TAB is expected by most users to create a tab, not jump to the next element in the page.

Do you think that giving TAB formatting functionality will improve UX?

Answer 1

I suggest enabling TAB's formating <code> between code tags. </code>

---

<code> If I were to hit TAB now, it would result in 4 spaces. </code> But not outside of the tags.

Advantages

---

• Avoids a keyboard trap. Impaired users can easily avoid using <code> tags, and if they do use them, navigating away from them can be done with arrow keys.

• It doesn't affect the editor's primary functionality. It targets users who have searched the tab issue and found that tabs work for formatting! <code> between code tags :) </code>

• The code for the feature is actually simple and fairly short. it can be done in just 365 characters [365 bytes]. Credit 100% to dandavis for this solution.

Try Before You Buy

---

Go ahead. Put it into the JS console of any Stack Exchange question page, and <code> use tabs between code tags! </code>. Or try the JSFiddle.

$("textarea").keydown(function (e) {
    var t = this.value,
    n = this.selectionStart,
    r = [t.slice(0, n), t.slice(n)];
    if (e.keyCode == 9 && t.indexOf("</code>", n) != -1 && t.lastIndexOf("<code>",
    n) != -1) {
        this.value = r.join("   ");
        this.selectionStart = this.selectionEnd = n + 1;
        e.preventDefault()
    }
})

Answer 2

I believe the primary reason for browser tabbing through elements is for keyboard/non pointer device users. How would these users navigate out of code area if traditional browser tab functionality was taken away?

Would it be possible to use a key combination along with the tab key to insert tabs? (alt+tab?)

Obviously the solution would need to be validated to make sure it doesn't clash with any browser defaults for other actions. For example shift+tab typically moves back through tabbable elements.

Answer 3

Yes, giving Tab functionality what it is expected to do would improve UX. If someone is explicitly editing code they would expect that pressing Tab will do a tab indent, or 4 spaces instead of tabbing over to Post Your Answer. They might Tab and then press Enter for a newline, and then instead of doing that, I'll posted my unfinished answer instead.

In the rightmost one, I'm writing code in the editor (I forgot to add code tags in this case, but it doesn't matter), and if I were to hit Tab, and in the middle of me attempting to type code, it goes right down to the Submit Answer area.

In the leftmost one, I am writing code, hit Tab and it doesn't interrupt my flow. The only problem is that you have to click the Submit Answer button, but I've always clicked it with a mouse, as it interrupts me and makes me think if I answered it to the best of my ability (which in SE's case, is usually a good thing). Plus, I get to tell everyone about the awesomeness of jQuery.

Answer 4

The key combo Shift + Space does the trick

---

See the feature request on Meta SE.

While using <code></code> to target the tab easy formatting is a bit rough around the edges, I think you'll find that Shift + Space offers a shortcut that appears to have no downside.

Advantages

---

• No keyboard trap. It doesn't affect Tab Order in any way.

• Doesn't break anything. No native functionality in any browser nor OS (that was the issue with Alt + Tab in Windows 8) uses this key combination.

• Doesn't require an interface change. This solution is silent, and therefore can be utilized by anyone who wishes to use the functionality without bothering anyone who doesn't.

• The code to do this is minimal. Like my other suggestion, the solution is barely over 300 bytes added to the site. Again, credit to dandavis for this code.

Try Before You Buy

---

Go ahead. Put it into the JS console of any Stack Exchange question page, and use Shift + Space for your formatting tabs. Or try the JSFiddle.

$("textarea").keydown(function (e) {
    var t = this.value,
        n = this.selectionStart,
        r = [t.slice(0, n), t.slice(n)];
    if (e.shiftKey && e.keyCode == 32) {
        this.value = r.join("   ");
        this.selectionStart = this.selectionEnd = n + 1;
        e.preventDefault()
    }
})

Answer 5

Vision impaired users need to be able to tab to different navigation points (most would like to submit their answer after typing it in), so no this should not be the default setting.

Using other key combinations like: shift+space or ctrl+K is not widely standardized but easy to learn and would not hinder keyboard navigation, so this is a good compromise for a default setting.

For sites in SE (or any site with user configurable settings) the tabbing behavior should be configurable in user settings.