w2ui.reload()中的jQuery$.post()使TEXTAREA在Chrome中安静地失去焦点
jQuery $.post() inside w2ui .reload() makes TEXTAREA silently lose focus in Chrome
注意:这个问题可能太专业化了。这个解决方案(如果我找到的话)除了我自己之外,不太可能帮助任何人。尽管如此,我相信下面描述的解决方法适用于几个边缘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,因为我不想保留以前版本的副本)。
- Chrome WebKitGetUserMedia
- JQueryhide()不适用于Mozzilla,但适用于Chrome
- 在chrome.tabs.onCreated之后加载HTML页面
- chrome扩展中的navigator.geolocation.getCurrentPosition
- chrome扩展:尽管运行了at:documentidle,js脚本还是过早启动
- document.open/document.write没有正确地清除chrome中的文档——这是chrome的错误吗
- chrome扩展更改主机/域警告
- Chrome开发工具(如何知道我在调用哪个javascript对象)
- 如何在chrome扩展中重定向到html页面
- Chrome扩展没有't在重新加载之前考虑期权价值
- Google/html5语音识别JavaScript SDK Chrome网络工具包SpeechRecognition
- 激活chrome上的chrome.notifications对象
- 如何通过自己获得Chrome扩展的用户反馈/错误报告
- JS可以在Chrome中工作,但不能在Firefox中工作
- Chrome加载旧版本的Javascript文件
- 试图阻止Chrome通过扩展关闭
- 如何在chrome扩展中存储数据/结果,以及如何使用setTimeout使其只被调用一次
- JS表单提交"无法使用Chrome数据保护程序加载此页面.尝试重新加载页面.调试信息:POST CISmtuK
- 是什么让一个“;Uncaught RangeError:超过了最大调用堆栈大小“;错误(Chrome,在其他浏览器中显示
- w2ui.reload()中的jQuery$.post()使TEXTAREA在Chrome中安静地失去焦点