Question

I found this question on Stack Overflow, and used the code given in the top answer.

It works marvelously otherwise, but there’s a kink; on my page I have multiple textareas. In fact, the selector I used was just "textarea".

However, when ‘tabbing’ from one textarea to another (using the Tab key to jump to the next one), apparently the focus event doesn’t fire, and the text doesn’t get selected.

How do I modify that code to work both by click, and by Tab?

JSFiddle here; http://jsfiddle.net/qQDbZ/ I’m on Chrome, and while clicking on the textarea does select all, tabbing doesn’t.

Answer 1

I was able to get this working with the following workaround:

$('textarea').focus(function() {
    var $this = $(this);
    $this.select().mouseup(function() {
        $this.off('mouseup');
        return false;
    });
}).keyup(function(e) {
    if(e.which === 9) {
        this.select();
    }
});

Demo: http://jsfiddle.net/KfFPM/3/

I tested the above in Chrome 21, Safari 6, Firefox 14, Opera 12, and IE 9. I’ll test more versions later; I’m happy for now. Works when tab’ing forward, and shift+tab’ing backwards.

Binding to keydown did not work.

I still think this workaround should be unnecessary. My best guess is that webkit browsers detect the tab as a keypress inside the textarea and therefore unselect the text, the same as any browser would if you had some text selected in a textarea and then started typing.