【问题标题】:In Javascript find if a checkbox is focused在Javascript中查找复选框是否聚焦
【发布时间】:2010-10-06 19:19:20
【问题描述】:

在 Javascript 中如何判断复选框是否有焦点?

我认为会有一个名为 isfocused 的方法或属性。但显然不是。

焦点是我的意思是他们已经使用键盘对其进行了标记,此时按空格键将选中该框。

【问题讨论】:

  • 为什么你需要知道它是否“有焦点”?这是否意味着他们选择了旁边的标签?只有“检查”和取消检查似乎很重要。
  • 在 javascript 中,我正在响应一些键盘事件,我需要知道它是否是列表中的最后一个复选框。
  • 如果他们使用鼠标会发生什么?
  • 那我就不用担心了。归根结底,如果他们在列表中的最后一个复选框上按标签,我需要隐藏列表。如果他们使用鼠标,列表将被关闭。

标签: javascript dom checkbox


【解决方案1】:

创建一个连接到 onfocus 事件的事件处理程序。当它被调用时,设置一个全局变量来记住它有焦点。在清除变量的 onblur 事件上再写一个。

【讨论】:

【解决方案2】:

当元素获得焦点时会触发 onfocus 事件。

<script type="text/javascript">

var isFocused = false;

</script>

<input type="checkbox" name="team" value="team" onfocus="javascript:isFocused = true;">Spurs<br>

【讨论】:

    【解决方案3】:

    您可能只需要挂钩 onfocus 和 onblur 事件,复选框才能跟踪它何时获得和失去焦点。

    【讨论】:

      【解决方案4】:

      下面是一个可能对您有所帮助的实现基础示例。注意:输出内容仅用于演示目的,并非实际解决方案的一部分。

      <html>
      <head>
          <script type="text/javascript">
      
          onload = function()
          {
              var f = document.forms.test;
              f.focusedElem = null;
              updateOutput( f );
      
              for ( var i = 0, l = f.elements.length, elem; i < l; i++ )
              {
                  elem = f.elements[i];
                  elem.onfocus = function( elem )
                  {
                      return function()
                      {
                          elem.form.focusedElem = elem;
                          updateOutput( elem.form );
                      }
                  }( elem )
      
                  elem.onblur = function()
                  {
                      f.focusedElem = null;
                      updateOutput( f )
                  }
              }
          }
      
          function updateOutput( f )
          {
              document.getElementById( 'output' ).innerHTML = ( null == f.focusedElem ) ? 'Nothing!' : f.focusedElem.id;
          }
      
          </script>
      </head>
      <body>
      
      <form name="test">
      
      <input type="checkbox" name="foo" id="foo1">
      <input type="checkbox" name="foo" id="foo2">
      <input type="checkbox" name="foo" id="foo3">
      <input type="checkbox" name="foo" id="foo4">
      
      </form>
      
      What has focus? <span id="output"></span>
      
      </body>
      </html>
      

      【讨论】:

        猜你喜欢
        • 2013-05-09
        • 1970-01-01
        • 2018-01-21
        • 1970-01-01
        • 2019-11-09
        • 1970-01-01
        • 1970-01-01
        • 2021-09-21
        • 1970-01-01
        相关资源
        最近更新 更多