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?

After edit: it gets called only once...that is when the document is ready — SamGhatak
– SamGhatak, Commented Apr 21, 2016 at 16:11
I'm trying first the trial code that I've added in the end. How do I display alert? — Vikas Kumar
– Vikas Kumar, Commented Apr 21, 2016 at 16:17

SamGhatak · Accepted Answer · 2016-04-21 16:04:16Z

6

I think you need this type of a checking:

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

answered Apr 21, 2016 at 16:04

SamGhatak

1,4931 gold badge16 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

SamGhatak Over a year ago

I think you should put the checking inside the anewFunc().....you can remove the document.ready part from inside...and bind the function with the event that supposed to trigger the call

Marat Tanalin · Accepted Answer · 2016-04-21 16:23:52Z

6

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

answered Apr 21, 2016 at 16:23

Marat Tanalin

14.2k1 gold badge38 silver badges53 bronze badges

1 Comment

lowtechsun Over a year ago

Concise, works (tested on Android 4.4.2) and pure JS, just what I was looking for, thank you Marat.

M.K. Wierzba · Accepted Answer · 2016-04-21 16:03:48Z

3

With Jquery 1.6+ :

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

answered Apr 21, 2016 at 16:03

M.K. Wierzba

1467 bronze badges

Comments

Derek Story · Accepted Answer · 2016-04-21 16:13:33Z

2

Here is an example showing a few different options:

CodePen Example

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

answered Apr 21, 2016 at 16:13

Derek Story

9,5831 gold badge26 silver badges35 bronze badges

3 Comments

Derek Story Over a year ago

As you currently have it, you're not calling the function until the document is ready. So no, you do not need to include it in that function.

SamGhatak Over a year ago

@VikasKumar : you will need it to set the interval, second use of document.ready inside the function newFunc is not required...instead, put a check there

Vikas Kumar Over a year ago

Got it @SamGhatak I just din't define when should the if condition start. I put the :focus code inside a new setInterval and it worked when I clicked inside input! Thank you.

nixkuroi · Accepted Answer · 2016-04-21 16:21:14Z

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.

kqvanity · Accepted Answer · 2021-10-23 23:04:12Z

1

The javascript event listener focus would only get fired once you focus the input box which is not ideal if you're doing multiple conditional statements .
I find having the expression document.activeElement == document.getElementById("input-box-id") more convenient in this regard .

answered Oct 23, 2021 at 23:04

kqvanity

983 silver badges10 bronze badges

Comments

João Pedro · Accepted Answer · 2016-04-21 16:04:01Z

0

You can use "is":

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

....
...
}

answered Apr 21, 2016 at 16:04

João Pedro

5461 gold badge5 silver badges19 bronze badges

Comments

score 0 · Accepted Answer · 2016-04-21 17:13:55Z

0

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

edited Apr 21, 2016 at 17:13

answered Apr 21, 2016 at 16:52

user6213434

Comments

codeWithMe · Accepted Answer · 2018-09-17 14:23:41Z

-2

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

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

answered Sep 17, 2018 at 14:23

codeWithMe

8922 gold badges12 silver badges17 bronze badges

1 Comment

VitorMM Over a year ago

OP wants to send an Ajax request on focus, not change the appearance of focus

Collectives™ on Stack Overflow

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

9 Answers 9

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

1 Comment

1 Comment

Comments

3 Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related