Question

让我们说我有以下div在满足某个条件后获得焦点：

<div id="myID" tabindex="-1" >Some Text</div>

我想创建一个处理程序，检查该div是否具有焦点，当它评估为true / focus在div上时，执行某些操作（在下面的示例中，打印控制台日志）：

if (document.getElementById('#myID').hasFocus()) {
            $(document).keydown(function(event) {
                if (event.which === 40) {
                    console.log('keydown pressed')
                }
            });
        }

我在控制台中收到一条错误消息：

TypeError：无法读取属性＆＃39; hasFocus＆＃39;为null

知道我在这里做错了什么吗？也许是我传递div Id的方式？

Answer 1

将document.activeElement与要检查焦点的元素进行比较。如果它们是相同的，则元素是集中的;否则，它不是。

// dummy element
var dummyEl = document.getElementById('myID');

// check for focus
var isFocused = (document.activeElement === dummyEl);

hasFocus是document的一部分; DOM元素没有这样的方法。

此外，document.getElementById在#的开头不使用myID。改变这个：

var dummyEl = document.getElementById('#myID');

到此：

var dummyEl = document.getElementById('myID');

如果您想使用CSS查询，可以使用querySelector（和querySelectorAll）。

Answer 2

使用document.activeElement

应该工作。

P.S getElementById("myID")而非getElementById("#myID")

Answer 3

如果你想使用jquery $("..").is(":focus")。

您可以查看此stack

Answer 4

这是一个块元素，为了能够获得焦点，您需要为其添加tabindex属性，如

<div id="myID" tabindex="1"></div>

Tabindex将允许此元素获得焦点。使用tabindex="-1"（或者实际上，只是完全删除属性）来禁止这种行为。

然后你可以简单地

if ($("#myID").is(":focus")) {...}

或使用

$(document.activeElement)

如前所述。

Answer 5

在脚本中编写下面的代码，并添加jQuery库

<?xml version="1.0" encoding="UTF-8" ?>
<page>
  <id>1459867896812</id>
  <bookId>1459867896812</bookId>
  <paperspace>21.49.16.203</paperspace>
  <checkDate>2016-04-05 16:51:36.812</checkDate>
  <penCheckDate>2016-04-05 16:51:36.812</penCheckDate>
  <receiveDate>2016-04-05 16:51:48.363</receiveDate>
  <pageNr>203</pageNr>
  <pages>1</pages>
  <processStatus>received</processStatus>
  <penData>
    <expiration>0</expiration>
    <signature/>
    <toEnterprise>1</toEnterprise>
    <company>Universitaet Muenster</company>
    <mandator>Uni_Muenster</mandator>
    <comment>Universitaet Muenster</comment>
    <pagesToComplete/>
    <previousPages>0</previousPages>
    <clientAttribute name="vertrag">XXXX</clientAttribute>
  </penData>
  <bounds>
    <x>260.0</x>
    <y>701.0</y>
    <width>217.0</width>
    <height>125.0</height>
  </bounds>
  <UnassignedStrokes>
    <starttime>1459867893629</starttime>
    <endtime>1459867896812</endtime>
    <stroke>
      <starttime>1459867893629</starttime>
      <endtime>1459867894815</endtime>
      <linewidth>1.0</linewidth>
      <color>-14090101</color>
      <bounds>
        <x>260.0</x>
        <y>750.0</y>
        <width>217.0</width>
        <height>18.0</height>
      </bounds>
      <sample>
        <x>260.625</x>
        <y>766.0</y>
        <time>1459867893629</time>
        <force>108</force>
      </sample>
      <sample>
        <x>260.625</x>
        <y>763.625</y>
        <time>1459867893722</time>
        <force>120</force>
      </sample>
      <sample>
        <x>262.875</x>
        <y>762.0</y>
        <time>1459867893775</time>
        <force>122</force>
      </sample>
      <sample>
        <x>278.0</x>
        <y>757.125</y>
        <time>1459867893935</time>
        <force>124</force>
      </sample>
      <sample>
        <x>294.875</x>
        <y>755.75</y>
        <time>1459867894015</time>
        <force>124</force>
      </sample>
      <sample>
        <x>304.875</x>
        <y>755.125</y>
        <time>1459867894055</time>
        <force>124</force>
      </sample>
      <sample>
        <x>319.125</x>
        <y>755.375</y>
        <time>1459867894109</time>
        <force>124</force>
      </sample>
      <sample>
        <x>474.25</x>
        <y>751.75</y>
        <time>1459867894802</time>
        <force>118</force>
      </sample>
      <sample>
        <x>469.875</x>
        <y>750.75</y>
        <time>1459867894815</time>
        <force>0</force>
      </sample>
    </stroke>
    <stroke>
      <starttime>1459867895892</starttime>
      <endtime>1459867896812</endtime>
      <linewidth>1.0</linewidth>
      <color>-14090101</color>
      <bounds>
        <x>364.0</x>
        <y>701.0</y>
        <width>10.0</width>
        <height>125.0</height>
      </bounds>
      <sample>
        <x>364.5</x>
        <y>701.0</y>
        <time>1459867895892</time>
        <force>32</force>
      </sample>
      <sample>
        <x>366.0</x>
        <y>702.0</y>
        <time>1459867895905</time>
        <force>106</force>
      </sample>
      <sample>
        <x>367.25</x>
        <y>702.625</y>
        <time>1459867895958</time>
        <force>120</force>
      </sample>
      <sample>
        <x>367.5</x>
        <y>703.125</y>
        <time>1459867896012</time>
        <force>122</force>
      </sample>
      <sample>
        <x>369.25</x>
        <y>724.125</y>
        <time>1459867896358</time>
        <force>126</force>
      </sample>
      <sample>
        <x>369.375</x>
        <y>748.0</y>
        <time>1459867896465</time>
        <force>126</force>
      </sample>
      <sample>
        <x>370.125</x>
        <y>765.0</y>
        <time>1459867896532</time>
        <force>126</force>
      </sample>
      <sample>
        <x>369.875</x>
        <y>779.5</y>
        <time>1459867896598</time>
        <force>126</force>
      </sample>
      <sample>
        <x>369.125</x>
        <y>789.125</y>
        <time>1459867896638</time>
        <force>126</force>
      </sample>
      <sample>
        <x>369.375</x>
        <y>795.25</y>
        <time>1459867896665</time>
        <force>126</force>
      </sample>
      <sample>
        <x>370.875</x>
        <y>803.75</y>
        <time>1459867896705</time>
        <force>126</force>
      </sample>
      <sample>
        <x>373.125</x>
        <y>825.625</y>
        <time>1459867896812</time>
        <force>126</force>
      </sample>
    </stroke>
  </UnassignedStrokes>
</page>

谢谢...

如何检查我的元素ID是否具有焦点？

5 个答案: