跨浏览器方法，以确定所选的锚标记是否会导致文本区域模糊

Crossbrowser method to determine anchor tag selected to cause textarea blur

本文关键字：是否 模糊 区域 文本 方法 浏览器      更新时间：2023-09-26

这里有几个关于如何确定焦点"并发"到文本区域onblur的位置的好问题。

但是我还没有找到一种很好的跨浏览器方法来确定单击了哪个锚标签，这导致文本区域触发了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（这根本不让我专注于锚点，按 Tab 键或单击）
  • 火狐 18.0.1
  • 铬 24.0.1312.56 米，

将焦点设置为延迟模糊复选框并单击/按 Tab 键进入锚点给我：

  • 铬：如果点击锚点，则为正文
  • 铬：如果我进入它的锚
    • 点
  • 野生动物园：无论哪种方式的身体
  • 火狐：无论如何的锚
    • 点

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

因此，不可否认，有一些方法可以让锚点在共享范围级别（例如，全局）设置布尔值，并从该布尔值的模糊事件查询中设置超时，以查看锚点是否[最近]获得焦点，但是伙计，伙计，这是笨拙的。

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

有没有更好的方法可以做到这一点？ 我猜jQuery很好，尽管我更喜欢一个干净的JavaScript解决方案——也就是说，一个干净的jQuery解决方案比复杂的JavaScript修复更好。

只要

您在锚标记上指定tabindex属性，document.activeElement的延迟检查在所有浏览器中都有效。 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表现得很好，因为tabindex的HTML4规范没有提到"可聚焦性"作为一个功能：

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

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

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

相关文章：