Question

此处有一个few好questions关于如何确定焦点与文字区onblur“并发”的位置。

但我没有找到一个好的crossbrowser方法来确定哪个锚标签被点击导致textarea触发onblur，setTimeout或者没有。 document.activeElement看起来很有希望，但是，在没有setTimeout，activeElement的情况下看似相反的答案是不可靠的。我继续在某些浏览器中将body作为activeElement返回。

例如： jsFiddle-ige #1：

HTML

<form>
    <input onblur="blurHandler();" type="text" id="spam1" 
        value="immediate blur check">
    <input onblur="blurHandlerTimeout();" type="text" id="spam2" 
        value="delayed blur check"> 
    <a href="#" id="spam3">X</a>
    <br>
</form>
<br>
<hr>
<br>
<div id="logs"></div>

的JavaScript

var logs = document.getElementById('logs');

function blurHandler() {
    logit(document.activeElement.outerHTML.substr(0, 80));
}

function blurHandlerTimeout() {
    setTimeout(function () {
        logit(document.activeElement.outerHTML.substr(0, 80));
    }, 10);
}

function logit(msg) {
    try {
        var e = document.createTextNode(msg), // probably a better way, but this does allow html as text
            f = document.createElement('div');

        logs.insertBefore(e, logs.firstChild);
        logs.insertBefore(f, logs.firstChild);
    } catch (err) {
        alert(err);
    }
}

每次针对以下情况发生来自立即模糊检查文本框的模糊的正文元素：

Safari 5.1.7（根本不让我专注于锚点，标签或点击）
Firefox 18.0.1
Chrome 24.0.1312.56 m，

将焦点设置为延迟模糊复选框，然后单击/跳转到锚点会给我：

Chrome：正文，如果点击主播
Chrome：锚点如果我选中
Safari：正文
Firefox：锚，无论

IE8每次为每个文本框提供锚点，延迟处理程序或否。

所以可以肯定的是，有一些方法可以让锚点在共享范围级别设置一个布尔值（例如，全局），并从模糊事件查询中获取一个setTimeout，该布尔值可以查看锚点[最近]是否得到了焦点，但是哦，那个人就是kludgey。

那就是说，我做了，给予或接受，在这里：jsFiddle-ige #2似乎在所有四个中都可以正常工作，尽管我担心它会变得边缘疯狂。

有更好的方法吗？ jQuery很好，我想，虽然我更喜欢一个干净的JavaScript解决方案 - 也就是说一个干净的jQuery解决方案比复杂的JavaScript修复更好。

Answer 1

只要您在锚标记上指定tabindex属性，document.activeElement的延迟检查就适用于所有浏览器。默认情况下，a没有标签顺序，所以我认为那些能够“关注”a而没有该属性的浏览器行为不端。

根据HTML5 spec：

tabindex内容属性允许作者控制元素是否应该是可聚焦的，是否应该使用顺序焦点导航可以到达，以及元素的相对顺序是什么用于顺序焦点导航。

（强调我的）

<form>
    <input onblur="blurHandler();" type="text" id="spam1" 
        value="immediate blur check">
    <input onblur="blurHandlerTimeout();" type="text" id="spam2" 
        value="delayed blur check"> 
    <a href="#" id="spam3" tabindex='1'>X</a>
    <br>
</form>
<br>
<hr>
<br>
<div id="logs"></div>

更新了小提琴： http://jsfiddle.net/Y5kcp/4/

在IE8 / 9，FF 18.0.1，Chrome 24.0.1312.56 m，Safari 5.17中测试

这是纯粹的推测，但也许IE表现得很好，因为HTML4 spec for tabindex没有提到“可聚焦性”作为一个特征：

此属性指定当前文档的Tab键顺序中当前元素的位置。

在这种情况下，可能遵循HTML 4规范的浏览器可以使锚标记在有或没有tabindex属性的情况下可以聚焦。

值得注意的是，document.activeElement是IE4的专有功能（请参阅document.activeElement的MDN文章中的注释）。也许这就是为什么它在Internet Explorer中没有超时的情况下运行。

Crossbrowser方法确定选择的锚标签会导致textarea模糊

1 个答案: