如何检查输入框是否处于焦点状态？

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的解决方案？

编辑：一些答案建议使用:focus。所以我试了这个：

$(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>

但是它没有起作用。有什么问题吗？

- Vikas Kumar

---

阅读文档：https://api.jquery.com/focus/ - stackErr

你尝试过使用 document.activeElement 吗？ - Himanshu Tanwar

编辑后：它只会被调用一次...即文档准备就绪时。 - SamGhatak

好的，@SamGhatak，我该如何改进它？ - Vikas Kumar

我首先尝试了我添加在末尾的试用代码。我如何显示警告？ - Vikas Kumar

Answer 1

在你的 input 元素上添加一个 focus 事件处理程序，每当该元素获得焦点时，你的回调函数将被调用。

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

Live demo

- Marat Tanalin

---

简洁，可用（在Android 4.4.2上测试过），纯JS，正是我所寻找的，谢谢Marat。 - lowtechsun

Answer 2

我认为你需要进行这种类型的检查：

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

- SamGhatak

---

我认为你应该把检查放在anewFunc()内部......你可以从内部删除document.ready部分......并将函数与触发调用的事件绑定。 - SamGhatak

Answer 3

使用Jquery 1.6+：

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

- M.K. Wierzba

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')
  }
});

- Derek Story

---

目前你的代码是在文档准备好后才调用函数。因此，不需要在该函数中包含它。 - Derek Story

@VikasKumar：您需要它来设置间隔，函数newFunc内部不需要第二次使用document.ready...相反，在那里放置一个检查。 - SamGhatak

明白了 @SamGhatak，我只是没有定义 if 条件应该何时开始。我将 :focus 代码放在一个新的 setInterval 中，当我点击输入框时它就起作用了！谢谢你。 - Vikas Kumar

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);
});

这个更改会在准备好后调用您的函数一次，设置时间间隔，并在输入字段聚焦时获取其值。

- nixkuroi

Answer 6

当你需要进行多个条件语句时，focus JavaScript事件监听器只会在你聚焦输入框时触发，这并不理想。
我认为在这种情况下，使用表达式document.activeElement == document.getElementById("input-box-id")更加方便。

- polendina

Answer 7

你可以使用“是”：

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

....
...
}

- João Pedro

Answer 8

尝试使用奇偶方法

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
  }
});

- user6213434

Answer 9

您不必输入大量的脚本，只需添加一些简单的CSS：

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

- codeWithMe

---

OP想在焦点上发送一个Ajax请求，而不是改变焦点的外观。 - VitorMM