How do I check if input field is in focus or not?

Question

I want to send an Ajax request only when my input field is in focus (i.e., cursor is inside it. Here's my code:

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

Now I don't know how to check every time the input has focus or not. Is there any jQuery solution for it?

EDIT: A few answers has suggested me :focus. So I tried this for trial:

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

But it's not working. Is there something wrong?

Answer 1

Try to use even odd method

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 2

Add a focus-event handler to your input element, and your callback function will be called every time the element gets focused.

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

Live demo

Answer 3

With Jquery 1.6+ :

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

Answer 4

First, take the $(document).ready out of your function. You only need to call it once, not on interval.

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

This change calls your ready function ONCE, sets the interval, and gets the input field's value when it is focused.

Answer 5

You don't have to type a bunch of scripts, just add some simple css:

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

Answer 6

You can use "is":

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

....
...
}