1

关于如何确定焦点“并发”到 textarea 的位置，这里有几个很好的问题onblur。

但是我还没有找到一种好的跨浏览器方法来确定单击了哪个锚标记导致 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（它根本不让我专注于锚点，标签或点击）
  • 火狐 18.0.1
  • 铬 24.0.1312.56 m,

将焦点设置到延迟模糊复选框并单击/切换到锚点会给我：

  • Chrome：如果单击锚点，则为正文
  • Chrome：如果我进入它的锚点
  • Safari：身体任何一种方式
  • Firefox：无论如何都是锚

IE8 每次都会为每个文本框、延迟处理程序或否给我一个锚点。

所以诚然，有一些方法可以让锚在共享范围级别（例如，全局）设置一个布尔值，并从模糊事件查询中获得一个 setTimeout 布尔值来查看锚 [最近] 是否获得焦点，但是天哪，那是笨拙的。

就是说，我做到了，付出或接受，在这里：jsFiddle-ige #2 似乎在所有四个中都可以正常工作，尽管我担心这将是极端情况下的疯狂。

有没有更好的方法来做到这一点？jQuery 很好，我想，虽然我更喜欢干净的 JavaScript 解决方案——也就是说，干净的 jQuery 解决方案比复杂的 JavaScript 修复更好。

4

1 回答 1

1

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

根据HTML5 规范：

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 规范tabindex没有提到“可聚焦性”作为一个特性：

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

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

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

于 2013-02-01T20:42:08.953 回答