CODEWITHSUNDEEP
jqueryasp.net-mvc-3qtip2
seekay
seekay

Reputation: 2513

Focus on textfield within tooltip

Showing a 'share' link in a textfield within a tooltip using qTip2.

The tooltip itself works fine, but I'd also like to get the textfield to have focus with all the text selected. Found this, but somehow the focus/click + select doesn't seem to be working.

JSFiddle link

Upvotes: 2

Views: 579

Answers (2)

seekay
seekay

Reputation: 2513

In case any one is interested in another approach, here's the answer I got from Craig Thompson (qTip creator), which uses the autofocus event

           show: {
                event: 'click',
                ready: true,
                solo: true,
                autofocus: '.focusselect'
            },
            events: {
              show: function(event, api) {
                  $('input.focusselect', this).bind('focus', function() {
                      $(this).select();
                  });
              }
           }

Upvotes: 1

mu is too short
mu is too short

Reputation: 434665

Something seems to be removing the focus from the text input after the show callback is called; could just be a timing issue, could be something in qTip2 changing the focus.

You can try using a setTimeout with a time of zero to trigger a function once the browser gets control back (and that should happen after all the qTip2 stuff has finished). This works for me in Chrome, Safari, Firefox, and Opera:

events: {
    show: function(event, api) {
        var $this = $(this);
        setTimeout(function() {
            $this.find('input.focusselect').focus().select();
        }, 0);
    }
}

Demo: http://jsfiddle.net/ambiguous/npZgv/

Upvotes: 3

Related Questions