[CLOSED] HTMLEditor "stealing" focus

  1. #1

    [CLOSED] HTMLEditor "stealing" focus

    I am trying to create a form with an HTMLeditor on it and no matter what I set in the config it (the editor) steals focus on page load from the text fields at that are in front of it.

    Any suggestions of how I can set the focus to the text box on the line above the HTMLEditor and then ideally allow the user to "tab" into the Editor.

    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e) {
            if (!X.IsAjaxRequest) {
                this.HtmlEditor1.Text = "<b>Some Initial HTML. You can edit it and submit to server.</b>";
            }
        }
    
    
        protected void Submit(object sender, DirectEventArgs e) {
            X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show();
        }
    </script>
    
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <h1>HtmlEditor</h1>
            <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject"
                AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true"
                BlankText="Please enter a subject" MsgTarget="Side" />
    
    
            <ext:HtmlEditor
                ID="HtmlEditor1"
                runat="server"
                Width="600"
                EnableAlignments="false"
                EnableFontSize="false"
                CreateLinkText="My CreateLinkText">
                <ButtonTips>
                    <BackColor Text="My BackColor Tip" />
                    <Bold Text="My Bold Tip" />
                </ButtonTips>
            </ext:HtmlEditor>
    
    
            <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
        </form>
    </body>
    </html>
    Thanks in advance,
    Last edited by Daniil; Jan 30, 2015 at 4:50 AM. Reason: [CLOSED]
  2. #2
    Yes, your example showcases a ...stubborn editor!
    Can you please try and place the fields inside a FormPanel?
  3. #3
    I can (since that is how I am using it) but it makes no difference in the behavior so went for a minimalist approach in my example.

    Here is an example using a formpanel:

    <%@ Page Language="C#" %>
    <script runat="server">
        protected void Submit(object sender, DirectEventArgs e) {
            X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <h1>Greedy Editor</h1>
            <ext:FormPanel
                runat="server"
                Title="The focus shoud be in the subject field"
                Width="800"
                BodyPadding="5"
                Layout="ColumnLayout">
                <FieldDefaults LabelAlign="Left" MsgTarget="Side" />
    
    
                <Items>
                    <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject"
                        AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true"
                        BlankText="Please enter a subject" MsgTarget="Side" />
    
    
                    <ext:HtmlEditor
                        ID="HtmlEditor1"
                        runat="server"
                        Width="600"
                        AutoFocus="false"
                        EnableAlignments="false"
                        EnableFontSize="false"
                        CreateLinkText="My CreateLinkText">
                    </ext:HtmlEditor>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Do note that the focus is being set correctly but then it is "stolen" by the HTMLEditor and that is triggering the validation on the textfield.
    Last edited by geoffrey.mcgill; Jan 29, 2015 at 11:36 PM.
  4. #4
    I even tried putting it in a different panel to no avail:

    <%@ Page Language="C#" %><script runat="server">
        protected void Submit(object sender, DirectEventArgs e) {
            X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <h1>Greedy Editor</h1>
            <ext:FormPanel
                runat="server"
                Title="The focus shoud be in the subject field"
                Width="800"
                BodyPadding="5"
                Layout="ColumnLayout">
                <FieldDefaults LabelAlign="Left" MsgTarget="Side" />
    
    
                <Items>
                    <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject"
                        AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true"
                        BlankText="Please enter a subject" MsgTarget="Side" />
                </Items>
            </ext:FormPanel>
            <ext:Panel
                runat="server"
                Width="800"
                BodyPadding="5" FocusOnToFront="false"
                Layout="ColumnLayout">
                <Items>
                    <ext:HtmlEditor
                        ID="HtmlEditor1"
                        runat="server"
                        Width="600" FocusOnToFront="false"
                        AutoFocus="false"
                        EnableAlignments="false"
                        EnableFontSize="false"
                        CreateLinkText="My CreateLinkText">
                    </ext:HtmlEditor>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
                </Buttons>
            </ext:Panel>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jan 29, 2015 at 11:37 PM.
  5. #5
    Hello everybody,

    Yes, HtmlEditor is quite capricious sometimes. I can suggest to try the following.

    Example
    <%@ Page Language="C#" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                this.HtmlEditor1.Text = "<b>Some Initial HTML. You can edit it and submit to server.</b>";
            }
        }
    
        protected void Submit(object sender, DirectEventArgs e)
        {
            X.Msg.Alert("Submit", "The following has been submitted:" + this.HtmlEditor1.Text).Show();
        }
    </script>
    
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>Ext.NET v2 Example</title>
    
        <script>
            Ext.form.field.HtmlEditor.override({
                initComponent: function() {
                    this.callParent(arguments);
                    this.originalFocus = this.focus;
                    this.focus = Ext.emptyFn;
                }
            });
        </script>
    
        <script>
            var onInitialize = function() {
                App.TextField1.focus();
                this.focus = this.originalFocus;
            };
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            
            <ext:TextField ID="TextField1" runat="server" />
    
            <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                <Listeners>
                    <Initialize Fn="onInitialize" />
                </Listeners>
            </ext:HtmlEditor>
    
            <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
        </form>
    </body>
    </html>
  6. #6
    In a futile attempt to outsmart this greedy control I disabled it and added some code to re enable it if conditions were met.
    I then discovered that even if it is disabled the focus is set and you can type in the "text area".

    Based on this I suspect it is actually a bug and not a behaviour.

    <%@ Page Language="C#" %><script runat="server">
        protected void Submit(object sender, DirectEventArgs e) {
            X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.HtmlEditor1.Text).Show();
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <h1>Greedy Editor</h1>
            <ext:FormPanel
                runat="server"
                ID="frmPanel"
                Title="The focus shoud be in the subject field"
                Width="800"
                BodyPadding="5"
                Layout="ColumnLayout">
                <FieldDefaults LabelAlign="Left" MsgTarget="Side" />
    
    
                <Items>
                    <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject"
                    AllowBlank="false" AutoFocus="true" TabIndex="1" MaxWidth="790" AutoFitErrors="true" EnableKeyEvents="true"
                    BlankText="Please enter a brief subject" MsgTarget="Side" ValidateOnBlur="true" SelectOnFocus="true">
                    <Listeners>
                        <KeyUp Handler="#{HtmlEditor1}.setDisabled(!#{frmPanel}.isValid());" />
                    </Listeners>
                </ext:TextField>
                <ext:HtmlEditor
                    ID="HtmlEditor1"
                    runat="server"
                    Border="true"
                    MaxWidth="790"
                    TabIndex="2" 
                    Disabled="true"
                        CreateLinkText="My CreateLinkText">
                    </ext:HtmlEditor>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
  7. #7
    Hi Daniil,

    Thanks for your example.

    I plugged it into my page and it worked in IE11 and Firefox but not in Chrome.

    I then realized I was still manually setting focus into my TextField in the codebehind on page load and that was causing Chrome to act weird. Once I deleted this code it all worked perfectly.

    Thanks again.

    I am posting the updated example with the annotated offending code for the benefit of others.

    <%@ Page Language="C#" %>
    <script runat="server">
        protected void Submit(object sender, DirectEventArgs e) {
            X.Msg.Alert("Submit", "The following has been submitted:<br/><br/>" + this.txtHtmlComments.Text).Show();
        }
        protected void Page_Load(object sender, EventArgs e) {
            txtEmailSubject.Focus(); //remove this and all is well.
        }
    </script>
    <!DOCTYPE html>
    <html>
    <head runat="server">
        <title>HtmlEditor - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <script type="text/javascript">
            Ext.form.field.HtmlEditor.override({
                initComponent: function () {
                    this.callParent(arguments);
                    this.originalFocus = this.focus;
                    this.focus = Ext.emptyFn;
                }
            });
        </script>
        <ext:XScript runat="server">
                <script type="text/javascript">
                    var txtHtmlComments_onInitialize = function () {
                        #{txtEmailSubject}.focus();
                        this.focus = this.originalFocus;
                    };
                </script>
            </ext:XScript>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
            <h1>Greedy Editor</h1>
            <ext:FormPanel
                runat="server"
                ID="frmPanel"
                Title="The focus shoud be in the subject field"
                Width="800"
                BodyPadding="5"
                Layout="FormLayout">
                <Items>
                    <ext:TextField runat="server" ID="txtEmailSubject" LabelAlign="Right" FieldLabel="Subject"
                        AllowBlank="false" TabIndex="1" MaxWidth="790" AutoFitErrors="true" EnableKeyEvents="true"
                        BlankText="Please enter a brief subject" MsgTarget="Side" ValidateOnBlur="true" SelectOnFocus="true">
                    </ext:TextField>
                    <ext:HtmlEditor
                        ID="txtHtmlComments"
                        runat="server"
                        Border="true"
                        MaxWidth="790"
                        TabIndex="2"
                        CreateLinkText="My CreateLinkText">
                        <Listeners>
                            <Initialize Fn="txtHtmlComments_onInitialize" />
                        </Listeners>
                    </ext:HtmlEditor>
                </Items>
                <Buttons>
                    <ext:Button runat="server" Text="Submit" OnDirectClick="Submit" />
                </Buttons>
            </ext:FormPanel>
        </form>
    </body>
    </html>
    Last edited by geoffrey.mcgill; Jan 29, 2015 at 11:38 PM.

Similar Threads

  1. [CLOSED] HtmlEditor.Call("append", "xxx") does not work
    By hdsoso in forum 2.x Legacy Premium Help
    Replies: 6
    Last Post: Feb 17, 2014, 11:36 PM
  2. HtmlEditor - restrict to use "B" "I" "U" only
    By Nelson in forum 1.x Help
    Replies: 1
    Last Post: Sep 27, 2012, 12:20 PM
  3. [CLOSED] [1.X] HtmlEditor and IE compatibility mode changes "a" tag
    By FVNoel in forum 1.x Legacy Premium Help
    Replies: 3
    Last Post: Jun 06, 2012, 12:03 PM
  4. Replies: 5
    Last Post: May 02, 2012, 5:37 PM
  5. Replies: 4
    Last Post: Oct 11, 2011, 2:42 AM

Tags for this Thread

Posting Permissions