Undesired behavior - Clicking anywhere on page after loading - focus always goes to radeditor

2 posts, 0 answers
  1. Amy
    Amy avatar
    113 posts
    Member since:
    Aug 2010

    Posted 08 Dec 2011 Link to this post

    Hi!  We've recently run into an issue with the radeditor which seems to correspond to around the time we upgraded our Telerik asp.net/ajax controls from 2011 Q2 to 2011 Q3. 

    On our page we have a radeditor which utilizes the code below provided by Telerik to show the word 'Comments' in the radeditor until the user clicks in the radeditor, upon which the word 'Comments' disappears.

    var defaultContent = "Comments";
     
                function OnEditorLoad(editor, args) {
                    editor.set_html(defaultContent);
                    var EditorElement = document.all ? editor.get_document().body : editor.get_document();
     
                    $telerik.addExternalHandler(EditorElement, "click", function (e) {
                        if (editor.get_html(true).trim() == defaultContent) {
                            editor.set_html("");
                        }
                    });
     
                    $telerik.addExternalHandler(EditorElement, "blur", function (e) {
                        if (editor.get_html(true).trim() == "") {
                            editor.set_html(defaultContent);
                        }
                    });
                }
     
    ---------------------------------------------------------------------------------------------------
     
    <telerik:RadEditor ID="reComments" runat="server" Skin="Windows7" Width="94.7%" Height="150px"
     ToolsFile="~/Content/Tools_NoToolbar.xml" ToolTip="Enter Comments"
     ContentAreaCssFile="~/Content/cssRadEditorWhiteContent.css" OnClientLoad="OnEditorLoad"  ToolbarMode="Default"
     EditModes="Design" StripFormattingOptions="MSWordRemoveAll" ContentAreaMode="Div">
        <CssFiles>
            <telerik:EditorCssFile Value="~/Content/cssRadEditorWhiteContent.css" />
        </CssFiles>
    </telerik:RadEditor>

    This previously worked fine with no issues.  However since upgrading the controls, no matter what other field (e.g., textbox, radiobuttons, etc) a user clicks on once a page loads, the cursor always ends up inside the radeditor and requires the user to have to click again in order to set the focus back on the original field clicked.  This has become very frustrating for our users.

    A secondary, much less important issue noticed is the word 'Comments' no longer reappears if a user clicks outside the radeditor without entering any text, etc,;  whereas previously if a user clicked in the radeditor, the word 'Comments' would disappear, and if the user left the radeditor blank then when they clicked elsewhere on the page the word 'Comments' would re-appear.

    These issues are experienced on multiple different pages where we've utilized this functionality, suggesting whatever has caused the issue isn't the result of something on the individual pages themselves.  It also happens regardless of which browser is used to access our site (i.e., Firefox, Chrome, IE).

    Any ideas or thoughts?

    Thanks!
  2. Dobromir
    Admin
    Dobromir avatar
    1633 posts

    Posted 12 Dec 2011 Link to this post

    Hi Amy,

    Could you please try the following modified JavaScript to achieve the required functionality:
    var defaultContent = "Comments";
     
    function OnEditorLoad(editor, args)
    {
        editor.set_html(defaultContent);
        var EditorElement = editor.get_contentArea();
     
        $telerik.addExternalHandler(EditorElement, "click", function (e)
        {
            if (editor.get_html(true).trim() == defaultContent) {
                editor.set_html("");
            }
        });
     
        $telerik.addExternalHandler(EditorElement, "blur", function (e)
        {
            if (editor.get_html(true).trim() == "") {
                editor.set_html(defaultContent);
            }
        });
    }  

    The problem that you experience is due to the fact that the editor is configured to use editable <div> for its content area (ContentAreaMode="Div"), and the code that you are using is attaching event handlers to the document's <body>, which is in fact the <body> element of the page and not the editor's content area.

    Also, in the provided RadEditor's configuration, you are using ContentAreaCssFile and CssFiles properties which are not compatible with ContentAreaMode="Div" and they will not be applied. Is there any particular reason that you have set ContentAreaMode to Div?

    All the best,
    Dobromir
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top