text区域焦点事件在Chrome中意外发生了很多次

textarea focus event takes place so many times unwantedly in Chrome

本文关键字：发生了 意外 Chrome 区域 焦点 事件 text      更新时间：2023-09-26

非常简单的JS:

$(".input").focus(function(){
    alert("input clicked");
});

HTML:

<textarea class="input"  style="height:20px" cols="60"></textarea>

在Chrome中收到了很多警报，但在FF中，一切都很好

如果我使用"点击"而不是"聚焦"，那么在Chrome中，非常温和地聚焦文本区域不会启动警报框，但它确实会聚焦。我测试了焦点，并更改了一些默认文本（代码中没有提到）。

我想做一个状态更新框，就像Facebook一样。当用户聚焦文本区域时，它将以新内容水平展开。

Chrome和所有其他浏览器的行为方式相同（只产生一次警报）？

我相信它可能是这样的：您在文本区域中单击，它将被聚焦，并调用事件侦听器。显示警告框会导致文本区域在显示该框时失去焦点。当您取消警报框时，文本区域将变为焦点，并再次调用事件侦听器。

如果是这种情况，并且Chrome是唯一一个这样做的浏览器，那么提交错误报告可能是个好主意。

更新：并解决您的问题。你确定你需要警报框吗？这通常是个坏主意，最好使用其他（非阻塞）警报机制。

据我所知，你不需要这个盒子。只需展开文本区域，而不显示警告框。并使用console.log进行调试。

我推测Chrome处理警报框的方式有一个小错误。当你关注文本区域时，它会触发警报框，警报框会立即获得焦点（从而从文本区域获得焦点）。当您单击"确定"以解除警报时，文本区域会重新获得焦点，但在Chrome中，它似乎会再次触发focus事件，从而导致UI循环。

这种情况似乎只有在你启动警报框的情况下才会发生。如果用console.log("input clicked")替换警报（例如），您将在JS控制台中看到该事件只触发一次。使用focus可以很好地完成您想要完成的任务；你刚刚发现了一个奇怪的浏览器错误。

编辑

如果让使用警报框，请尝试：

var alerted = false;
$(".input").focus(function() {
  if(!alerted) {
    alert("input clicked");
    alerted = true;
  }
});

这只会触发一次，但在页面的生存期内（或者直到您将alerted设置为false），这也可能不是所需的行为。建议使用console.log进行调试，在大多数情况下避免使用alert。

您可以使用click事件，而不是像本例那样使用focus事件。。。

<textarea rows="3" class="input" style="height: 20px" cols="60"></textarea>
        <script language="javascript" type="text/javascript">
            $(".input").click(function () {
                alert("input clicked");
                $(this).focus();
            });
        </script>

现在它在所有浏览器中都能成功工作。。。。

相关文章：