如何检查输入字段是否处于焦点？

Question

我只想在我的输入字段处于焦点时发送 Ajax 请求（即，光标在其中。这是我的代码：

function anewFunc() {
    $(document).ready(function(){
        var chatattr = $(".chatwindow").css("visibility");
        var chattitle = $("#hideid").text();
        if (chatattr == "visible") {
            if (MY INPUT FIELD HAS FOCUS) {
                $.ajax({
                    url: 'seen1.php',
                    type: 'post',
                    data: "ctitle="+chattitle,
                    success: function(result9) {},
                    error: function() {}
                });
            }
        } else {
            $.post("seendefault.php");
        }
    });
}

$(document).ready(function(){
    var zzz = setInterval(anewFunc, 2000);
});

现在我不知道每次输入是否有焦点时如何检查。 是否有任何 jQuery 解决方案？

编辑：一些答案建议我：焦点。 所以我试了一下这个：

$(document).ready(function(){
                           if($("#msgtypeid").is(":focus")){
                               alert("Hello");
                           }
                           });

HTML：

<form id="chatform" name="form4" method="post" required enctype="multipart/form-data">
          <input id="msgtypeid" type="text" name="cmessage" autocomplete="off" autofocus/>
        </form>

但它不起作用。 有什么不对？

Answer 1

使用Jquery 1.6+：

$("..").is(":focus")

Answer 2

我想你需要这种类型的检查：

var hasFocus = $('#idOfTheInputElement').is(':focus');
if(hasFocus){
    //logic here
}

Answer 3

在您的input元素中添加一个focus -event处理程序，每次元素聚焦时都会调用您的回调函数。

document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('example').addEventListener('focus', function() {
        alert('The input is focused.');
    });
});

现场演示

Answer 4

以下示例显示了一些不同的选项：

CodePen示例

HTML

<input type='text' class="is-focus">

<input type="text" class="isActiveElement">

<input type="text" class="focused">

JS

$('input').on('click', function() {

  if ($('.is-focus').is(':focus')) {
    alert('focused')
  }

  if ($(document.activeElement).is('.isActiveElement')) {
    alert('isActiveAlement')
  }

  if($('.focused:focus').length) {
    alert(':focus')
  }
});

Answer 5

首先，从你的函数中取出$（document）.ready。 你只需要调用一次，而不是间隔。

var myInterval= null;  // in case you decide to clear it later.

function anewFunc() {

        var chatattr = $(".chatwindow").css("visibility");
        var chattitle = $("#hideid").text();
        var chatinput = $("#inputid");
        var chatText = chatinput.val();
        if (chatattr == "visible") {
            if (chatinput.is(":focus")) {
                $.ajax({
                    url: 'seen1.php',
                    type: 'post',
                    // if you're posting data, it should be as a json object
                    data: {"ctitle" : chattitle, "text":chatText}, 
                    success: function(result9) {},
                    error: function() {}
                });
            }
        } else {
            $.post("seendefault.php");
        }
}

$(document).ready(function(){
    myInterval = setInterval(anewFunc, 2000);
});

此更改调用您的就绪函数ONCE，设置间隔，并在聚焦时获取输入字段的值。

Answer 6

你可以用“是”：

if ($("input").is(":focus")) {

....
...
}

Answer 7

尽量使用奇怪的方法

var i = 0;

$('.chatwindow').on('focus blur', function () {

  i += 1;

  var tog = function (someNum) {

     if ((someNum % 2) === 1) {
        return true;
     } else {
        return false;
     }
  };


  if (tog(i) === true) {
     // make ajax function

  } else {
    // do something else
  }
});

Answer 8

javascript 事件侦听器focus只会在您聚焦输入框时被触发，如果您正在执行多个条件语句，这并不理想。
我发现在这方面使用表达式document.activeElement == document.getElementById("input-box-id")更方便。

Answer 9

您不必键入一堆脚本，只需添加一些简单的css：

#yourInputOrWhatever:focus {
    /* Your New Code Here */
}