CODEWITHSUNDEEP
javascriptjquery
Finnnn
Finnnn

Reputation: 3580

bind focus to a radio button

I'm working in chrome 12, my code is below.

HTML:

<input type="radio" class="tooltip" title="test1" name="group" value="1"> 1<br>        
<input type="radio" class="tooltip" title="test2" name="group" value="2"> 2<br>
<input type="radio" class="tooltip" title="test3" name="group" value="3" checked> 3<br>
<input type="text" class="tooltip" value="4" title="test4"><br>
<div class="result"> THIS SHOULD UPDATE WHEN YOU FOCUS ON ONE OF THE INPUTS </div>

​ JavaScript:

$('.tooltip').bind('focus', function(ev) {
 $('.result').html( this.value );
});

(fiddle)

Is it possible to bind a focus event to a radio button? Can you offer an alternative?

Upvotes: 2

Views: 3120

Answers (1)

Shadow Wizzard
Shadow Wizzard

Reputation: 66388

It's not working only when you click a button if you set focus via keyboard your original code works in all browsers.

Looks like only IE will trigger the focus event when the button is clicked, Chrome triggers only the click event. Note that if you click one then press TAB it does work, even in Chrome.

Maybe a bug and maybe by design, anyway just handle both:

$(document).ready(function() {
    var _currentExecuting = false;
    $(".tooltip").bind("focus click", function() {
        if (!_currentExecuting) { 
            var oResult = $(".result");
            oResult.html(oResult.html() + "yoy oi " + this.value + "<br />"); 
            _currentExecuting = true;
            window.setTimeout(function() {
                _currentExecuting = false;
            }, 100);
        }
    });
});

Since IE browsers will trigger both the focus and click events when clicked, I had to set global flag then check for this flag before executing any code and auto clear it after some short interval.

Updated fiddle.

Upvotes: 4

Related Questions