w2ui.reload()中的jQuery$.post()使TEXTAREA在Chrome中安静地失去焦点

jQuery $.post() inside w2ui .reload() makes TEXTAREA silently lose focus in Chrome

本文关键字:Chrome 安静 失去 焦点 中的 reload jQuery w2ui post TEXTAREA      更新时间:2023-09-26

注意这个问题可能太专业化了。这个解决方案(如果我找到的话)除了我自己之外,不太可能帮助任何人。尽管如此,我相信下面描述的解决方法适用于几个边缘Chrome/jQuery焦点丢失场景

场景:

我有一个输入TEXTAREA来输入一些文本。

同时,计时器定期对服务器进行AJAX调用(每分钟一次)。

发生的情况:

Firefox中,一切都很好,用户可以随心所欲地打字。

Chrome上,当AJAX请求触发时,输入焦点将丢失。它说。。。显然没有。window.activeElement不返回任何内容,光标确实从文本区域消失,直到用户再次用鼠标单击它。

我所期望的:

好吧,让焦点停留在那里。

尝试次数:

One-我尝试在文本区域的[.focusout()][1]上设置一个事件处理程序,结果发现该事件没有激发。当用户点击其他地方时,它会触发,但这没有帮助。

两个-然后我尝试了一种不那么优雅的——更确切地说,是残酷的——方法:

var hasFocus = document.activeElement;
if (hasFocus) {
    var focusKeeper = window.setInterval(function(){
        hasFocus.focus(); // JUST. STAY. THERE.
        $(hasFocus).css("background-color", "red");
    }, 10);
}

该字段变为红色,因此处理程序至少正在启动。只是焦点没有回来。就好像Chrome甚至没有尝试一样。

同样,在Firefox中一切都如预期的那样工作。接下来我将在Safari上尝试确认这是否是一个与Webkit相关的东西。

研究和更多尝试:

我发现了几篇关于如何克服注意力丧失的帖子,或者如何从一开始就设定注意力,即使是在新创建的领域(我的情况并非如此),但我的情况似乎足够不同,它们要么毫无线索,要么根本不起作用。文件指出

element.focus();

是必要和充分的,但很明显它不是。有人建议使用零延迟超时设置焦点;我试过了,但似乎无济于事。

这是否与Chrome可能在不同的进程中运行XHR请求有关,因此"焦点"将指向隐藏的XHR窗口?(我还没有尝试过--process-per-site命令行开关,只是突然想到了——我现在要尝试一下)。

这可能是个bug吗?有类似的东西,但bug 27868与Flash对象有关,而不是TEXTAREAs——这是一种完全不同的动物AFAIK。

奇怪的是,这种行为(或一种惊人的相似行为)在Firefox上被注意到,错误报告者明确表示,的重点应该保持在同一个输入控件上,就像其他浏览器中的一样,所以他在Chrome上观察到了而不是

JSFiddle-没有表现出这种行为,从而提供了线索

我做了一把小提琴,然后。。。它是有效的。因此,问题似乎更多地与计时器中调用的函数有关,该函数是w2ui grid.reload()。我仍然不明白为什么焦点没有像应该的那样使用focus()返回。

可接受的解决方法

受amphetamachine评论的启发,我尝试将上面帖子中的几个技巧结合起来。我想出了一个有效的组合。。。有点。

所需的元素(无论我删除哪一个,技巧都会停止工作)是:

  • 手动将焦点重新设置在原来的位置
  • 在setInterval计时器内执行此操作
  • 在重新设置之前先模糊焦点
  • 在一个短的、但不为零的、setTimeout延迟内取消设置并重置焦点。

    // Save focus.
    hasFocus   = document.activeElement;
    w2ui.myGrid.reload(function() { // Callback, called after reloading.
        // If there was no focus, we just return.
        if (hasFocus) {
            // We DON'T do anything directly, but use setTimeout.
            window.setTimeout(
                function() {
                    // And before setting the focus, we truly remove it.
                    hasFocus.blur();
                    hasFocus.focus();
                }, 5); // A timeout of 0 does not work.
        }
    });
    

这个解决方案的"缺点"是光标在视觉上"颤抖",在网格的第二部分.reload()中,在丢失Chrome焦点的未知事件之后,按下的任何键都会丢失。

过时:只更新库

在最新的Chrome上将w2ui升级到1.4.2时,这种奇怪的行为消失了(实际上,我没有尝试以前的Chromes,因为我不想保留以前版本的副本)。