This is a migrated thread and some comments may be shown as answers.

How to catch backspace in word/key counter

2 Answers 24 Views
Editor
This is a migrated thread and some comments may be shown as answers.
RMC Research
Top achievements
Rank 1
RMC Research asked on 28 Aug 2013, 03:09 PM
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>

2 Answers, 1 is accepted

Sort by
0
Ianko
Telerik team
answered on 02 Sep 2013, 11:49 AM
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
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 the blog feed now.
0
RMC Research
Top achievements
Rank 1
answered on 04 Sep 2013, 04:03 PM
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!
Tags
Editor
Asked by
RMC Research
Top achievements
Rank 1
Answers by
Ianko
Telerik team
RMC Research
Top achievements
Rank 1
Share this question
or