将焦点绑定到单选按钮

时间:2012-05-02 12:38:05

标签: javascript jquery

我正在使用chrome 12,我的代码在下面。

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

是否可以将焦点事件绑定到单选按钮?你能提供替代方案吗?

1 个答案:

答案 0 :(得分:4)

只有在您通过键盘设置焦点时单击按钮才能正常工作,原始代码适用于所有浏览器。

在单击按钮时,只有IE会触发焦点事件,Chrome才会触发点击事件。请注意,如果您单击一个然后按 TAB 它即使在Chrome中也能正常工作。

也许是一个错误,也许是设计,无论如何只是处理两个:

$(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);
        }
    });
});

由于IE浏览器在点击时会同时触发焦点和点击事件,因此我必须设置全局标志,然后在执行任何代码之前检查此标志,并在一段短暂的间隔后自动清除它。

Updated fiddle