【问题标题】:Jquery/Javascript: Find cursor/focus field on clickJquery/Javascript:单击时查找光标/焦点字段
【发布时间】:2013-07-26 21:57:46
【问题描述】:

如何通过事件监听器捕获光标的位置?

也就是说,如果我的用户点击了一个按钮,是否可以找到当时光标所在的位置?如果有,怎么做?

更新 我不确定我是否足够清楚。我不想要 mouse 位置。我的意思是,如果光标在表单的输入字段内,我想定位光标并找出 FOCUS 的位置。

【问题讨论】:

  • 如果用户点击某些东西,我认为键盘焦点会从原来的位置移除。

标签: javascript jquery cursor-position


【解决方案1】:

当然,当您单击按钮时,焦点会从其他任何地方消失。但我似乎明白你想知道刚才的焦点在哪里。

你可以这样:

$('input, textarea, select').on('focus', function() { 
  console.log($(this).attr('id') + ' just got focus!!');
  window.last_focus = $(this).
});

$('button').on('click', function() {
  console.log('Last focus was on ' + window.last_focus.attr('id'));
});

这只是一个非常幼稚的实现。我也很好奇你为什么需要这个?

还有一个focusout事件,当某物失去焦点时触发,这可能更合适。

【讨论】:

  • 我有一个带按钮的表单。当用户点击按钮时,我希望使用之前聚焦的元素作为参考点。
【解决方案2】:
$("#button").click(function(e){
  console.log(e.clientX)//relative screen
  console.log(e.clientY)
  console.log(e.pageX)//relative document(scroll + window position)
  console.log(e.pageY)
})

【讨论】:

    【解决方案3】:

    这应该可以解决问题:http://jsfiddle.net/eTsN3/

    $('button').click(function (e) {
        alert(e.pageX + '/' + e.pageY);
    });
    

    更多详情:http://docs.jquery.com/Tutorials%3aMouse_Position

    【讨论】:

      【解决方案4】:

      如果您想使用 Jquery 捕获鼠标位置并将其存储在某个标签中,请使用:

      $(document).mousemove(function(e){
           $('#sometag').html("X Axis : " + e.pageX + " Y Axis : " + e.pageY);
      
        });
      

      e.pageXe.pageY 支持鼠标位置信息。所以在你的情况下,你可以使用

      $('button').click(function(e){
               $('#sometag').html("X Axis : " + e.pageX + " Y Axis : " + e.pageY);
      
            });
      

      您可以阅读this

      【讨论】:

        【解决方案5】:

        您可以通过以下方式找出当前具有焦点的输入字段:

        $("input:focus")
        

        但是,当您单击按钮时,这将不起作用,因为在为单击的处理程序运行单击处理程序之前,单击输入字段外部会使其模糊。请参阅此 fiddle 我演示它的地方。它使用preventDefault(),但这并不能防止模糊。

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 2011-12-18
          • 2015-07-28
          • 1970-01-01
          • 2018-08-12
          • 1970-01-01
          • 2011-04-13
          • 2015-09-21
          • 1970-01-01
          相关资源
          最近更新 更多