1

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.

Community
  • 1
  • 1
Emphram Stavanger
  • 4,158
  • 9
  • 35
  • 63
  • 2
    Can you just fiddle the code? – glarkou May 01 '12 at 18:07
  • 2
    focus should definitely fire when a user tabs into the text area. – jbabey May 01 '12 at 18:10
  • It works just fine in Opera and Chrome (it fires the onfocus event properly). Didn't test in other browsers though. Can you provide us with an example and please tell us in which browser(s) it doesn't work. – Styxxy May 01 '12 at 18:14
  • Fiddle'd; http://jsfiddle.net/qQDbZ/ – Emphram Stavanger May 01 '12 at 18:32
  • Video evidence of it not working; http://videobin.org/+5on/66b.html - apparently focus does fire after all, but the text just doesn't get selected. Any idea? – Emphram Stavanger May 01 '12 at 20:07
  • 1
    I'm having the exact same problem. Tested on Win7 with Chrome v21.0.1180.83 and OSX 10.7.4 with Chrome v21.0.1180.82 and Safari 6.0 (7536.25). Works fine in Firefox and IE (and presumably all other non-webkit browsers). The focus event is definitely firing when using tab key to navigate, but the text within the textarea is not selected. When clicking, everything works fine. – rexmac Aug 24 '12 at 18:11

3 Answers3

5

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.

rexmac
  • 1,584
  • 10
  • 14
2
$('input[type="textarea"]').keydown(function(event){
    var keypressed = event.keyCode || event.which,
    tab = 9,
    $this = $(this);

    if(keypressed === tab){
       $this.next('textarea').focus();
    }
});

not sure exactly what the problem is but if you need to force a solution this should work.

Evan
  • 5,975
  • 8
  • 34
  • 63
0
$('textarea').focus(function() {
    var $this = $(this);
    $this.select();
}).keyup(function(e) {
    if(e.which === 9) {
        this.select();
    }
}).off('mouseup',function(){
    return false;
})
Marcel Santos
  • 1
  • 1
  • 1
    Might want to change that magic number to the jQuery-provided constant `$.ui.keyCode.TAB`. It is slightly more readable. – Ryan Ransford Apr 22 '15 at 19:18
  • Also, could you explain your code a bit please? [Code-only answers](http://meta.stackexchange.com/q/148272/284827) are usually frowned upon as, without explanation, they do not help the question asker, and others, to understand what you have done. – Wai Ha Lee Apr 22 '15 at 19:39
  • 1
    To further @WaiHaLee's comment, you should include an explanation of why your answer solves an issue that other answers have not. – Sumner Evans Apr 22 '15 at 19:58