javascript: How to give focus on object after triggering off("focus")

Question

I want to protect an input by a confirmation popup window, and when one confirms, i want to delete this protection, and give the focus to the input. My attempt was:

my_input.on('focus', switch_off_focus_handler(my_input));

function switch_off_focus_handler(input){
   var confirm = confirm("Are you sure?");
   if (confirm) {
      input.off('focus');
      input.focus();
   }
}

When I click on the input, I get the confirmation popup. If I click OK, the on_focus handler is indeed deleted (because clicking a second time on the input will not trigger the popup), but the input does not get the focus. (input.focus() seems to have no effect).

Am I doing wrong ?

EDIT: Sorry, that was not the correct code i used. Here it is (With the html environment for testing):

<!doctype html>
<html>
    <head>
        <script src="/static/js/jquery-1.11.1.min.js" type="text/javascript"></script>
    </head>
    <body>
        <input type="text" value="HALLO" id="my_input">
        <script type="text/javascript">
            my_input=$("input#my_input")
            my_input.on('focus', switch_off_focus_handler(my_input));

            function switch_off_focus_handler(input){
                return function () {
                    var conf = confirm("Are you sure?");
                    if (conf) {
                        input.off('focus');
                        input.focus();
                    }
                }
            }
        </script>
    </body>
</html>

The problem seems to come from the confirm dialog. If i replace

var conf = confirm("Are you sure?");

by

var conf = true;

then it works.

score 0 · Answer 1 · answered Sep 04 '15 at 08:04

You need to pass a function reference as the focus event handler, inside the handler this will refer to the current element.

Also it is a better practice to target only your handler while unbinding the handler, one possible solution for that is to use event namespace

my_input.on('focus.confirm', switch_off_focus_handler);

function switch_off_focus_handler() {
    var confirm = confirm("Are you sure?");
    if (confirm) {
        $(this).off('focus.confirm').focus();
    }
}

If you don't want to change the syntax of the method, then use a anonymous event handler which can call the switch_off_focus_handler method

my_input.on('focus.confirm', function () {
    switch_off_focus_handler(this);
});

function switch_off_focus_handler(input) {
    var confirm = confirm("Are you sure?");
    if (confirm) {
        $(input).off('focus.confirm').focus();
    }
}

I'm sorry. I did use a function reference, but i copied the wrong code in the minimal example :( But it still doesnt work, somehow because of the confirm box. I will edit my question. — Loic Rosnay, Sep 04 '15 at 08:47

Rahul Singh · Answer 2 · 2015-09-04T08:59:35.657

0

I hope you want the input to be disabled and you want to open confirmation when he clicks disabled input and then you want to enable it once the user confirms it. In this case add disabled to your input and then use following code to remove disabled and make it functional. Please note that click event does not binds to a disabled input so you need to wrap your input in some container(say #container) and then bind click on that container.

$("#container").on('click', function(){
  if(my_input.prop("disabled")){
    switch_off_focus_handler(my_input);
  }
});

function switch_off_focus_handler(input){
   var confirm = confirm("Are you sure?");
   if (confirm) {
      input.prop('disabled', false).focus();
   }
}

Hope this helps. See this fiddle.

edited Sep 04 '15 at 08:59

answered Sep 04 '15 at 08:48

Rahul Singh

892
9
24

the variable confirm should have another name as the function confirm. – Loic Rosnay Sep 04 '15 at 09:11
well ... for me, it does not work. Maybe because im using FF (see http://stackoverflow.com/questions/3100319/event-on-a-disabled-input) – Loic Rosnay Sep 04 '15 at 09:25
in that case you can use another element which is placed over the input using position properties with transparent background and bind click to this element. Do you want fiddle for this? – Rahul Singh Sep 04 '15 at 12:11

javascript: How to give focus on object after triggering off("focus")

2 Answers2