Question

如何确定Chrome中textarea元素（:focus，:hover等）的状态？

对于上下文，我试图创建一个Web应用程序。在上一页提交表单后，新页面的textarea会自动显示光标，我不希望这样。我尝试使用下面的jQuery代码，该代码适用于Firefox但不适用于Chrome：

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

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

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

我已经四处寻找，但我只找到像set :hover state这样的答案，讨论如何使用Chrome开发工具设置特定状态，而不是如何确定任何状态时的当前状态。< / p>

我意识到我可以在JavaScript中检查每个可能的状态，但似乎我错过了检查状态的正确方法。

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

感谢您的帮助！

Answer 1

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

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

＆＃13;

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');
  }
});

＆＃13;

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

＆＃13;

确定chrome中的当前DOM元素状态

1 个答案: