Geek Answers Handbook

Lost button click event due to warning window in onblur event text box

I created a simple web form containing one text box and one button. I captured the onblur event in the text box.

<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> function onTextBoxBlur() { alert("On blur"); return true; } </script> </head> <body> <form id="form1" runat="server"> <asp:TextBox ID="TextBox1" runat="server" onblur="onTextBoxBlur();"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" /> </form> </body> </html>

When I enter some value into the text field and click on the button, the onblur event of the text field appears, but there is no onclick button on it. And, when I remove the warning window from the js function, it works fine. Some, like a button press is an event, get lost. I think this is because of the warning window. Any idea why this is?

+6
javascript button onchange textbox onblur
source share
3 answers

A "click" button has two parts, mouse down and mouse up. When you click on the button, it receives focus - blurring the text field and triggering your warning. Since notification dialogs are modal, they stop all activity on the page, so the button does not detect the mouse, and your click does not end.

You could work around the problem using a timer in the blur event, and cancel this timer in the mousedown button event:

 var timer; function onTextBoxBlur() { timer = window.setTimeout(function () { alert("On blur"); }, 0); return true; } function onButtonMouseDown() { clearTimeout(timer); }
+6
source share

Got it ... I got his job ...

Adding an explicit call to a button click in the onblur event is incorrect, because the onblur event can occur at any time, for example, when the user goes to another text field or anywhere on the form, etc. (as Cory Ogburn mentioned in the comments above). Thus, the button click will be started, although the user did not actually click the button.

So, in the onblur event, there should be a way to identify that the submit button is being pressed, and if it then starts, click the button explicitly. Here is the code

 <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> <script language="javascript" type="text/javascript"> var clicked = 0; function onTextBoxBlur() { alert("On blur " + clicked); if(1 == clicked) { clicked = 0; document.getElementById("Button1").click(); } return true; } function SubmitButtonClicked() { clicked = 1; } </script> </head> <body> <form id="form1" runat="server" > <div> </div> <asp:TextBox ID="TextBox1" runat="server" onfocusout="onTextBoxBlur();"></asp:TextBox> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" Text="Button" onmousedown="SubmitButtonClicked();" /> </form> </body> </html>

Here, during the mousedown event of the button that occurs before the onblur of the text field, I set the value for the clicked flag and in the onblur of the text field, now I can determine if the button is pressed or not.

But , again, this is just the desktop and OK for such an example application :). This is practically impossible in practice, because there can be more such submit buttons on the web form, and we will have to trigger the click event of all such buttons (links, etc.) in the onblur event of the text field. This is due to the fact that the user can click any of the submit buttons (links, etc.) after entering data in the text field, and the notification / confirmation in onblur will suppress these click events. I hope I get it.

Enjoy !!!

+2
source share

Write a function and call the function from button mousedown and onClick Events

+1
source share

More articles:


All Articles