javascript - 确定 Chrome 中当前 DOM 元素状态

Question

如何确定 Chrome 中 textarea 元素(:focus、:hover 等)的状态？

就上下文而言，我正在尝试创建一个 Web 应用程序。在上一页提交表单后，新页面的 textarea 自动出现光标，这是我不希望发生的情况。我尝试使用下面的 jQuery 代码，该代码在 Firefox 中有效，但在 Chrome 中无效:

element = $("#elementID");
if (element.is(":focus")) {
    element.blur();
}

在 Chrome 中，代码不会执行 if 语句中的 element.blur()(意味着 if 语句失败)。我已经使用调试器进行了检查，并且 Chrome 中的 id 成功返回了该元素。所以我认为问题出在状态检查语句上。

我认为问题出在元素状态上，我想调查当时的元素状态，最好使用 Chrome 开发者工具。不幸的是，我不知道如何检查当前状态。我只能弄清楚如何检查状态是否等于特定状态。

我四处搜索，但只找到类似 set :hover state 的答案其中讨论如何使用 Chrome 开发工具设置特定状态，而不是如何确定可能是任何状态的当前状态。

我意识到我可以在 JavaScript 中检查此时的每种可能状态，但似乎我缺少检查状态的正确方法。

这是一个 JSFiddle my specific case 。不过，我也有兴趣听到有关确定 textarea 当前状态的一般问题的答案。

感谢您的帮助!

Answer 1

这很可能是操作顺序问题 - 在检测到输入焦点之前执行逻辑。

我在这里重现了这个问题，并通过将代码放入窗口 .load() 来修复它。事件。

var $el = $('textarea');

// will not execute
if ($el.is(':focus')) {
  $el.blur();
  console.log('outside of window load');
}

// will execute
$(window).load(function() {
  if ($el.is(':focus')) {
    $el.blur();
    console.log('inside window load');
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<textarea autofocus></textarea>