Check textbox focus using jQuery

Question

Possible Duplicate:
Using jQuery to test if an input has focus

I need to check if a particular textbox has the focus or not using jQuery. So my code is like this, but it is not working:

if (document.getElementById("lastname").focus = true) {
    alert("hello");
}

My use-case is this: I have a textbox which should be shown or hidden when the #lastname textbox gains or loses focus. However, if the #lastname textbox loses the focus to the other textbox, the latter should remain visible until it loses focus as well.

Any help will be appreciated.

http://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus — Martin van Dam, Aug 18 '12 at 07:25
p.s. to check equality in JavaScript, the operator is `==`; a single `=` is used to assign the value of the RHS to the variable on the LHS, which you definitely don't want in this case. — nbrooks, Aug 18 '12 at 07:43

nbrooks · Accepted Answer · 2012-08-18T19:41:16.590

16

if ($("#lastname").is(':focus')) {
    alert("hello");
}

jQuery docs for :focus
jQuery docs for .is()

Update: To show/hide an element when the field gains/loses focus use the focusin and focusout events handlers:

$(document).ready(function() {
    $('#lastname').focusin(function() {
        $(hidden-element).show();
    }).add(hidden-element).focusout(function() {
        if ( !$(hidden-element).is(':focus') ) {
            $(hidden-element).hide();
        }
    });
});
//where hidden-element is a reference to or selector for your hidden text field

edited Aug 18 '12 at 19:41

answered Aug 18 '12 at 07:24

nbrooks

18,126
5
54
66

Code is fine.But i apologize for not telling the actual requirements.Actually its a textbox which gets hide or show when focus is in or out on a another textfield.Now when the focus is out,the second appeared texbox also gets hide.it should be hide only when the focus is out from both the textboxes. – user853575 Aug 18 '12 at 10:10
@user853575 OK I understand your requirement now, you only want to hide the `hidden-element` if it is not in focus. I've updated my answer. – nbrooks Aug 18 '12 at 19:41

score 1 · Answer 2 · answered Aug 18 '12 at 07:23

1

$("#lastname").focus(function(){
    alert("lastname has focus");
});

answered Aug 18 '12 at 07:23

redDevil

1,909
17
25

please read the jquery docs before u go further with this: http://api.jquery.com/focus/ – redDevil Aug 18 '12 at 07:38
Ok.Thanks.Actually i am making a other textfield visible when focus is on the "lastname" field.it is working now.But when focus is not on "lastname",that field still appears.it should be hidden then. – user853575 Aug 18 '12 at 08:01
@user853575 It's usually a good idea to edit your question directly and include any updates or pertinent info. Anyway, see my updated answer. – nbrooks Aug 18 '12 at 08:20

score 1 · Answer 3 · answered Aug 18 '12 at 07:57

1

if (document.getElementById("lastname").focus == true) {
        alert("hello");
    }

Check with == , using = is an assignment

answered Aug 18 '12 at 07:57

rowasc

320
1
3
10

score 0 · Answer 4 · answered Aug 18 '12 at 07:25

0

You can try jQuery's :focus selector. Or you can always add a class and check for that class.

answered Aug 18 '12 at 07:25

gerky

6,267
11
55
82

score 0 · Answer 5 · edited Dec 16 '16 at 13:28

0

<script type="text/javascript" language="javascript">

    function check() {

        if ($(document.activeElement).attr("id") === "element_name") {
            alert('checkbox is focused');
        }
    }

</script>

edited Dec 16 '16 at 13:28

Jim Wolff

5,052
5
34
44

answered Aug 18 '12 at 07:26

Anant Dabhi

10,864
3
31
49

VBH · Answer 6 · 2012-08-18T07:33:34.657

0

Try this

var status = $('#lastname').is(":focus");
alert(status);//false or true

edited Aug 18 '12 at 07:33

answered Aug 18 '12 at 07:32

VBH

9
6

Check textbox focus using jQuery

6 Answers6