2010-07-14 17 views
6

He creado un formulario web simple, que contiene un cuadro de texto y un botón. He capturado el evento onblur del cuadro de texto.botón clic evento perdido debido al cuadro de alerta en cuadro de texto evento onblur

<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> 

Cuando entro en algún valor en la caja de texto y haga clic en el botón, entonces el evento onBlur del cuadro de texto se produce, pero el onclick del botón no. Y, cuando elimino el cuadro de alerta de la función js, funciona bien. De alguna manera, el clic del botón es el evento se pierde. Creo que se debe a la casilla de alerta. ¿Alguna idea de por qué es esto así?

Respuesta

6

Un "clic" de un botón tiene dos partes, el mouse hacia abajo y el mouse hacia arriba. Cuando presiona el botón con el mouse, gana foco, borrando el cuadro de texto y disparando su alerta. Como los cuadros de diálogo de alerta son modales, detienen toda la actividad en la página, por lo que el botón no detecta el mouse y el clic no se completa.

Podría ser posible evitar el problema con un temporizador en el caso de falta de definición, y la cancelación de ese temporizador en el evento MouseDown del botón:

var timer; 
function onTextBoxBlur() 
{ 
    timer = window.setTimeout(function() { alert("On blur"); }, 0); 
    return true; 
} 

function onButtonMouseDown() 
{ 
    clearTimeout(timer); 
} 
+0

¿hay alguna solución para esto? –

+0

@Vinod T.Patil: en realidad no. La única "solución alternativa" sería esperar hasta que se complete el clic o evitar el uso de 'alerta'. –

+0

una forma es, haga clic en el botón de llamada explícita, como document.getElementById ("Button1"). Haga clic en() ;, después de la alerta. Funciona. Pero, está bien para esa aplicación de muestra, en la práctica puede haber otros cuadros de texto en el formulario y en ese caso no quisiera que el clic de botón se dispare inmediatamente después de salir del primer cuadro de texto. –

1

escribir una función y dar una llamada a la función desde del botón mousedown y onClick Eventos

2

Got it .... lo tengo trabajo ...

Adición de llamada explícita al clic del botón en onBlur caso no es correcto, porque onBlur evento puede ocurrir en cualquier momento, como cuando nosotros Pase a otro cuadro de texto o haga clic en cualquier parte del formulario, etc. (como lo mencionó Corey Ogburn en los comentarios anteriores). Entonces, el clic del botón se disparará aunque el usuario no hizo clic en el botón.

Por lo tanto, en el evento onblur debería haber una forma de identificar que se está haciendo clic en el envío y si es así, desactive el clic del botón explícitamente. Aquí está el código,

<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> 

aquí, en el evento MouseDown del botón, que se produce antes de onBlur del cuadro de texto, he puesto un valor de bandera clicked y en onBlur del cuadro de texto, ahora puedo identifique si se está haciendo clic en el botón o no.

Pero, de nuevo, esto es solo un workarround y está bien para la aplicación de muestra :). Es menos factible en la práctica porque puede haber más botones de envío en el formulario web y tendremos que activar el evento de clic de todos los botones (enlaces, etc.) en el evento onblur del cuadro de texto. Esto se debe a que el usuario puede hacer clic en cualquiera de los botones de envío (enlaces, etc.) después de ingresar datos en el cuadro de texto y alert/confirm en onblur va a suprimir esos eventos de clic. Espero que esté claro.

Enjoy !!!

Cuestiones relacionadas