[Solved] How to catch backspace in word/key counter

[RMC Research]

I would like to catch the backspace and delete keys in CountCharAction so that the alert is not triggered. 
How do I get the keyCode in CountCharAction in the below code?

<telerik:RadEditor ID="RadEditor1" runat="server" Height="150px" Content='<%# Bind("SchoolMission") %>'>

 

    <Modules>

        <telerik:EditorModule Name="MyModule" Enabled="true" Visible="true" />

        <telerik:EditorModule Name="RadEditorStatistics" Enabled="true" Visible="false" />

    </Modules>

    <Tools>

        <telerik:EditorToolGroup Tag="MainToolbar">

            <telerik:EditorTool Name="FindAndReplace" />

            <telerik:EditorSeparator />

            <telerik:EditorSplitButton Name="Undo">

            </telerik:EditorSplitButton>

            <telerik:EditorSplitButton Name="Redo">

            </telerik:EditorSplitButton>

            <telerik:EditorSeparator />

            <telerik:EditorTool Name="Cut" />

            <telerik:EditorTool Name="Copy" />

            <telerik:EditorTool Name="Paste" ShortCut="CTRL+V" />

        </telerik:EditorToolGroup>

    </Tools>

    <Content>

    </Content>

 

    <TrackChangesSettings CanAcceptTrackChanges="False"></TrackChangesSettings>

</telerik:RadEditor>

<script type="text/javascript">

    MyModule = function (element) {

        MyModule.initializeBase(this, [element]);

    }

 

    MyModule.prototype =

    {

        initialize: function () {

            MyModule.callBaseMethod(this, 'initialize');

            var selfPointer = this;

            //this.get_editor().add_selectionChange(function () { selfPointer.CountCharAction(); });

            this.get_editor().attachEventHandler("onkeyup", function () { selfPointer.CountCharAction(); });

            this.get_editor().attachEventHandler("onclientpaste", function () { selfPointer.CountCharAction(e); });

            this.CountCharAction();

        },

 

        //The method that does the actual counting work

        CountCharAction: function () {

            var content = this.get_editor().get_text();

            var editorId = this.get_id();

            var words = 0;

            var chars = 0;

            var maxWordCount = 28;

            if (content) {

                punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;

                content = content.replace(punctRegX, "");

                if (content) {

                    splitRegX = /\s+/;

                    var array = content.split(splitRegX);

                    words = array.length;

                    chars = content.length;

 

                }

            }

            var element = this.get_element();

            element.innerHTML = "<span style='line-height:22px'>" + "Words: " + words + " Characters: " + chars + " </span>";

            if (words > maxWordCount) {

                alert("Cannot exceed maximum word count.  Please shorten text.")

            }

        }

    }

 

    MyModule.registerClass('MyModule', Telerik.Web.UI.Editor.Modules.ModuleBase);

</script>


[Ianko]

Hi John,

The key code of the pressed keyboard buttons could be retrieved from the event arguments of the callback function. You could follow this article for more information on the matter and a sample JavaScript function.

I modified the custom module with logic for checking the pressed key. The changes are highlighted below:

MyModule.prototype =
{
    initialize: function () {
        MyModule.callBaseMethod(this, 'initialize');
        var selfPointer = this;
        //this.get_editor().add_selectionChange(function () { selfPointer.CountCharAction(); });
        this.get_editor().attachEventHandler("onkeyup", function (event) { selfPointer.CountCharAction(event); });
        this.get_editor().attachEventHandler("onclientpaste", function () { selfPointer.CountCharAction(e); });
        this.CountCharAction();
    },


    //The method that does the actual counting work
    CountCharAction: function (event) {
        var content = this.get_editor().get_text();
        var editorId = this.get_id();
        var words = 0;
        var chars = 0;
        var maxWordCount = 28;
        if (content) {
            punctRegX = /[!\.?;,:&_\-\-\{\}\[\]\(\)~#'"]/g;
            content = content.replace(punctRegX, "");
            if (content) {
                splitRegX = /\s+/;
                var array = content.split(splitRegX);
                words = array.length;
                chars = content.length;
            }
        }
        var element = this.get_element();
        element.innerHTML = "<span style='line-height:22px'>" + "Words: " + words + " Characters: " + chars + " </span>";

        var isCharRemoved = false;
        if (event) {
            var unicode = event.keyCode ? event.keyCode : event.charCode
            isCharRemoved = unicode === 8 || unicode === 46;
        }
        if (words > maxWordCount || !isCharRemoved) {
            alert("Cannot exceed maximum word count.  Please shorten text.")
        }
    }
}

Regards,
Ianko
Telerik

[RMC Research]

This is a great help and works fine.  I did change

if (words > maxWordCount || !isCharRemoved) {

to

if (words > maxWordCount && !isCharRemoved) {

Thank you for the help!