button click event lost due to the alert box in text box onblur event
I have created a simple web form, containing one text box and one button. I have captured the onblur event of 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="Butto开发者_JAVA技巧n" />
</form>
</body>
</html>
When I enter some value in text box and click on the button, then the onblur event of textbox occurs, but the onclick of the button doesn't. And, when I remove the alert box from the js function then it works fine. Some how the button click is event is lost. I think it is due to the alert box. Any idea why is this so?
A "click" of a button has two parts, mouse down and mouse up. When you mouse down on the button, it gains focus - blurring the text box and firing your alert. Since alert dialogs are modal, they halt all activity on the page so the button doesn't detect the mouse up and your click doesn't complete.
It could be possible to work around your issue using a timer within the blur event, and cancelling that timer within the mousedown event of the button:
var timer;
function onTextBoxBlur()
{
timer = window.setTimeout(function () { alert("On blur"); }, 0);
return true;
}
function onButtonMouseDown()
{
clearTimeout(timer);
}
Got it.... I got it working...
Adding explicit call to the button's click in onblur event is not correct, because onblur event can happen any time, like when user move to other text box or click anywhere in the form etc. (as mentioned by Corey Ogburn in comments above). So the button click would be fired though the user didn't actually clicked the button.
So, in onblur event there should be a way to identify that the submit is being clicked and if it is then fire the button's click 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, on mousedown event of the button, which occurs before onblur of the text box, I have set a value to flag clicked and in onblur of the textbox, now I can identify if the button is being clicked or not.
But, again this is just a workarround and OK for such sample application :). It is less feasible in practical because there can be more such submit buttons on the webform and we will have to fire click event of all such buttons (links etc.) in onblur event of the textbox. This is because, user can click on any of the submit buttons (links etc.) after entering data into the textbox and alert/confirm in onblur is going to supress those click events. Hope I am clear.
Enjoy!!!
Write a function and give a call to function from button's mousedown and onClick Events
加载中,请稍侯......
精彩评论