javascript - .is(焦点) 与 .activeElement？

Question

我遇到了一个奇怪的问题，我已经使用 document.activeElement.id 解决了这个问题，但是当使用 $('#id').is(': focus') 似乎总是返回 false。

在我的控制台中，我测试了以下内容...

> document.activeElement
<input type="text" for="zoomSlider" id="zoomText" oninput="zoomSliderUpdate(value)" value="100">

> $('#zoomText')
<input type="text" for="zoomSlider" id="zoomText" oninput="zoomSliderUpdate(value)" value="100">

> $('#zoomText').is(':focus')
false

> document.activeElement // to check if focus was lost somehow
<input type="text" for="zoomSlider" id="zoomText" oninput="zoomSliderUpdate(value)" value="100">

为什么 is(':focus') 返回 false？

Answer 1

首先，您的代码中有一个错误。它应该是 $('#zoomText').is(':focus')。

其次，只有当光标位于元素内部时，该元素才会成为焦点。如果您的光标位于 JavaScript 控制台中，则它具有焦点并导致输入模糊(失焦)。

在 JavaScript 控制台中尝试此操作，然后快速将光标放回输入中。 3秒后，控制台会显示“true”或“false”，以指示“zoomText”元素的焦点状态。

setTimeout(function() { console.log(jQuery('#zoomText').is(':focus')); }, 3000)