Geek Answers Handbook

Focus starts twice

I have a text box and a jQuery UI dialog box. When the user has finished entering text into the text field and presses Enter, I want to display a dialog. For this, I use the following code:

$(document).ready(function () { var helpDial = $('#helpDialog'); var input = $('#helpSearch'); helpDial.dialog({ width: 800, autoOpen: false, modal: true, title: "Templates", position: [165, 158] }); input.focusin(function () { helpDial.dialog('close'); }).focusout(function () { helpDial.dialog('open'); }).on('keypress', function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { input.focusout(); return false; } }); }); <input id="helpSearch" /> <div id="helpDialog"></div>

http://jsfiddle.net/7Fpm4/1

The problem is that when I focusout Enter, focusout is called twice, one from input.focusout() and the second time immediately after helpDial.dialog('open') in the focusout event focusout . This leads to the creation of two background labels, and when I close the dialog, one overlay remains visible.

What am I doing wrong? Is there a better way to handle this scenario - "typing in a text field opens a jQuery dialog". Thanks.

+4
source share
3 answers

The only way to prevent the event from firing is to untie the event handler. Or, depending on the situation, take differential actions based on the information available at the time the event occurs.

The focusout event is focusout anytime an element loses focus. In this case, every time the user clicks on the text field, the focusin event is focusin . As soon as the cursor leaves the text field (which occurs when the dialog box opens), the focusout event is focusout .

The problem with your code is that you force the focusout event to focusout , and then the focusout event focusout naturally when you open the dialog. So, change your code as follows:

 $(document).ready(function () { var helpDial = $('#helpDialog'); var input = $('#helpSearch'); helpDial.dialog({ width: 800, autoOpen: false, modal: true, title: "Templates", position: [165, 158] }); input.on('focusin', function () { input.on("focusout", textboxFocusOut); }).on('keypress', function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { textboxFocusOut(); } }); function textboxFocusOut() { input.off("focusout", textboxFocusOut); helpDial.dialog('open'); } });

http://jsfiddle.net/8L7EL/1/

What this code does is bind the function to focusout in the focusin handler . If the user moves away from the text field, the focusout event handler will be called, which will immediately cancel the focusout event (to prevent the function from binding several times). If the user presses the enter key, the function is called manually, which removes the focusout event handler before opening the dialog to prevent the focusout event from automatically triggering when the dialog opens.

+3
source

The most obvious solution would be to use a variable of type enter_pressed to inform the focusout function:

 $(function () { var helpDial = $('#helpDialog'), input = $('#helpSearch'), enter_pressed = false; helpDial.dialog({ width: 800, autoOpen: false, modal: true, title: "Templates", position: [165, 158] }); input.on('focusout', function () { if( !enter_pressed ) { helpDial.dialog('open'); } else { enter_pressed = false; } }).on('keypress', function (e) { var code = (e.keyCode ? e.keyCode : e.which); if (code == 13) { enter_pressed = true; helpDial.dialog('open'); } }); });

http://jsfiddle.net/joplomacedo/7Fpm4/7/

However, I believe there is a cleaner solution. I will try to come up with this.

Besides
Do I really need a .focusin event handler?

+3
source

http://jsfiddle.net/7Fpm4/2/ I updated your example, just changed input.focusin (function () to input.change (function ()

0
source

More articles:


All Articles