|
|
Rank: Member
Groups: Member
Joined: 9/24/2008
Posts: 11
|
When I open a modal dialog control and press the ENTER key, the dialog closes. How do I trap or disable that?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, The dialog handles a few special keys. This include ESC and ENTER key. ESC cancels the dialog and ENTER triggers "accept" event for the dialog. It is possible to disable ENTER key by handling and cancel "accept" event with JavaScript. It is not possible to disable ESC key. The code to handle and cancel "accept" event would be something like this:
Code: JavaScript
function accept_handler()
{
return false;
}
Code: HTML/ASPX
<eo:Dialog id="Dialog1" ClientSideOnAccept="accept_handler" ...>
....
</eo:Dialog>
Note this will also disable AcceptButton. In order to close the dialog, you would need to call the dialog's close function. You can put something like this in the dialog's ContentTemplate or FooterTemplate:
Code: HTML/ASPX
<input type="button"
onclick="eo_GetObject('Dialog1').close();"
value="close dialog" />
Hope this helps. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/13/2008
Posts: 43
|
eo_support wrote:It is possible to disable ENTER key by handling and cancel "accept" event with JavaScript. Following the instructions above certainly stops the ENTER key from closing the dialog. The problem is that it appears to disable the ENTER key completely! E.g. in the dialog below, I have a multi-line text box, an OK button and a Cancel button. Clearly, the user needs to use the ENTER (or carriage return) key to create line breaks in the text of the multiline textbox. If I remove the ClientSideOnAccept handler, pressing the ENTER key closes the dialog. If I enable the ClientSideOnAccept handler, pressing the ENTER key does nothing at all. Is there a way to get round this?
Code: HTML/ASPX
<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Register Assembly="EO.Web" Namespace="EO.Web" TagPrefix="eo" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Test</title>
<script type="text/javascript">
function accept_handler()
{
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="Show dialog" onclick="eo_GetObject('dlgTest').show();" />
<eo:Dialog runat="server" id="dlgTest" HeaderImageUrl="00020441" HeaderImageHeight="27"
MinHeight="100" MinWidth="150" AllowResize="false" ControlSkinID="None"
HeaderHtml='"padding-top:5px;">Test</div>'
BackColor="#ECE9D8" CloseButtonUrl="00020440" ConfineElementID="" ClientSideOnAccept="accept_handler">
<HeaderStyleActive CssText="background-image:url(00020442);color:#444444;font-family:'trebuchet ms';font-size:10pt;font-weight:bold;padding-bottom:7px;padding-left:8px;padding-right:0px;padding-top:0px;" />
<ContentStyleActive CssText="background-color:#f0f0f0;font-family:tahoma;font-size:8pt;padding-bottom:4px;padding-left:4px;padding-right:4px;padding-top:4px;" />
<BorderImages BottomBorder="00020409,00020429" RightBorder="00020407,00020427" TopRightCornerBottom="00020405,00020425" TopRightCorner="00020403,00020423" LeftBorder="00020406,00020426" TopLeftCorner="00020401,00020421" BottomRightCorner="00020410,00020430" TopLeftCornerBottom="00020404,00020424" BottomLeftCorner="00020408,00020428" TopBorder="00020402,00020422" />
<ContentTemplate>
<asp:TextBox ID="txtMulti" runat="server" Rows="6" Width="300px" TextMode="MultiLine" />
<br />
<asp:Button ID="cmdOK" runat="server" Text="OK" />
<asp:Button ID="cmdClose" runat="server" Text="Close" />
</ContentTemplate>
</eo:Dialog>
</form>
</body>
</html>
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi Mark, I blieve the dialog does not distinguish different scenarios because it does not know when it should close on enter and when it should not. However it does pass the DOM event object so that you can decide whether to cancel it based on the event. It will be something like this:
Code: JavaScript
function accept_handler(dialog, e)
{
//returning true or false based on information provided
//by the second argument e. Note e has different properties
//for different browsers.
}
Hope this helps. Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/13/2008
Posts: 43
|
eo_support wrote:I believe the dialog does not distinguish different scenarios because it does not know when it should close on enter and when it should not. However it does pass the DOM event object so that you can decide whether to cancel it based on the event. It will be something like this:
Code: JavaScript
function accept_handler(dialog, e)
{
//returning true or false based on information provided
//by the second argument e. Note e has different properties
//for different browsers.
}
I see. Using this, I have been able to identify which control within the dialog's ContentTemplate had the focus when the Enter key was pressed, as follows:
Code: JavaScript
function accept_handler(dialog, e)
{
switch (e.srcElement.id)
{
case "<%=txtMulti.ClientID%>":
{
return false;
break;
}
case "<%=cmdOK.ClientID%>":
{
return true;
break;
}
}
return false;
}
However, although I can stop the dialog from closing when the multiline textbox has the focus, what I can't figure out is how to cancel the event itself so that the carriage return is actually inserted into the text of the textbox. Is this possible...?
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
I am not sure if you can do that in the current release. We will look into it and see what we can find.
Thanks!
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/13/2008
Posts: 43
|
eo_support wrote:I am not sure if you can do that in the current release. We will look into it and see what we can find. Hmm - OK. I hope there will be a solution because, as it stands currently, this means that dialogs can't be used with multiline textboxes, or any other control which can under normal circumstances accept a carriage return...
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Yes. We do understand that. We will see what we can do on this.
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/13/2008
Posts: 43
|
eo_support wrote:Yes. We do understand that. We will see what we can do on this. I would greatly appreciate it. I am investigating what can be done in JavaScript, but have hit a brick wall... I know what control in the dialog has focus when the Enter key is pressed. From this, I can work out the current value of the text in the multiline text box: e.srcElement.value I also know what keycode has been pressed (e.keyCode). What I don't seem to be able to identify is the current position of the cursor when the Enter key is pressed. If I knew that, then it would be a fairly simple task to insert a carriage return at the cursor's current position...
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi,
I believe you can do that by getting document.selection first, then create a TextRange object by calling createRange method on the object returned by document.selection. You would then use that TextRange object to replace the current selection (which is empty) with whatever you would like to insert. Note this information is based on IE. Other browsers are similar but just like the DOM event object, the exact interface is different.
Thanks
|
|
Rank: Advanced Member
Groups: Member
Joined: 11/13/2008
Posts: 43
|
eo_support wrote:I believe you can do that by getting document.selection first, then create a TextRange object by calling createRange method on the object returned by document.selection. You would then use that TextRange object to replace the current selection (which is empty) with whatever you would like to insert. Note this information is based on IE. Other browsers are similar but just like the DOM event object, the exact interface is different. Thanks.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Build 2008.0.53 addressed this issue by introducing a new return value "0" for ClientSideOnAccept handler. Returning "0" instead of "false" from the handler indicates that the dialog should not close and the source event should not be discarded either.
|
|