JS：如何检测光标是否在文本字段中答案

【问题标题】：JS: How to detect whether cursor is in textfieldJS：如何检测光标是否在文本字段中
【发布时间】：2013-03-16 06:08:07
【问题描述】：

我想使用一些字母（键）作为 javascript 中某些操作的快捷方式。我想检查光标是否集中在任何文本字段、表单输入等上，以便在用户在表单或文本字段中输入内容时取消快捷操作。

例如，我希望在用户按下“A”时执行 alert()。但是如果用户在诸如“A website”之类的文本区域中输入一些文本，那么他将按下“A”，此时不应执行 alert()。

【问题讨论】：

虽然这完全有可能，但我可能会尝试使用组合键代替，例如 CTRL+SHIFT+A 或类似的，因为它不太可能首先干扰输入，也不会覆盖默认浏览器热键。如果您可以发布 code you currently have 问题，我相信我们可以解决它。

【解决方案1】：

$(document).keydown( function( e ) { 
  if( e.target.nodeName == "INPUT" || e.target.nodeName == "TEXTAREA" ) return;
  if( e.target.isContentEditable ) return;

  // Do stuff 
}

【讨论】：

考虑添加对datalist的支持。
datalist 的目标仍然是 input 字段，所以这应该可以工作

【解决方案2】：

window.onkeydown = function(e){
  if ( e.target.nodeName == 'INPUT' ) return;

  handle_shortcut();
};

【讨论】：

为什么要在“INPUT”上测试两次？

【解决方案3】：

jQuery

$(window).bind('keydown',function(e){
    if(e.target.nodeName.toLowerCase() === 'input'){
        return;
    }
    alert('a');
});

或者纯js

window.onkeydown = function(e){
    if(e.target.nodeName.toLowerCase() === 'input'){
        return;
    }
    alert('a');
};

除此之外，您还可以定义一个非警报元素类型数组，例如input、textarea 等，然后检查这些元素当前都不是目标。

演示：http://jsfiddle.net/7F3JH/

【讨论】：

+1 用于 JavaScript 和 jQuery 示例。虽然 OP 没有用 jQuery 标记问题，但它可能是 OP 的可行解决方案。

【解决方案4】：

您可以根据当前页面上的焦点元素来绑定和取消绑定快捷方式事件。

JavaScript

window.onload = initWindow();

function initWindow () {
    attachShortcutHandler();

    var inputs = document.getElementsByTagName('input');
    for (var i = 0, max = inputs.length; i < max; i++) {
        inputs[i].onfocus = removeShortcutHandler;
        intputs[i].onblur = attachShortcutHandler;
    }
}

function removeShortcutHandler () {
    window.onkeypress = null;
}

function attachShortcutHandler() {
    window.onkeypress = function () {
        //your code here
    }
}

jQuery

$(function () {
    initShortcutHandler();

    $('input, [any other element you want]')
        .on('focus', function () {
            $('body').off('keypress');
        })
        .on('blur', function () {
            initShortcutHandler();
        });
});

function initShortcutHandler() {
    $('body').on('keypress', function () {
       //do your stuff
    });
}

【讨论】：

【解决方案5】：

jQuerymouseover()

 $('element').mouseover(function() {
      alert('over');
 });

【讨论】：

我不是 100% 确定，但我认为 OP 打算知道 caret 当前是否在 input 中，这意味着控件当前具有焦点。问题的措辞很松散。

【解决方案6】：

您需要将标志设为全局。并在任何文本框有焦点时将其设置为 false。

var flag = true;

$('input:type="text").focus(function(txt) { 标志=假； });

if(flag) //快捷键有效...

【讨论】：

【解决方案7】：

最好使用 JQuery 中定义的 focusOut 方法。根据我的理解，你可以做这样的事情

$("input").focusout(function() {
  if($(this).val() == "A"{
   alert("your message");
   return false;
  }else{
    //do other processing here.
  }
});

希望这会有所帮助:)

【讨论】：

OP 没有用 jQuery 标记问题，所以答案也应该包含仅 JavaScript 的解决方案。