Text-as-you-type auto correct is a popular feature that replaces a specific phrase or character combination with a longer text while typing. Consider you are repeating specific phrases again and again such as "Thanks for your request". In this case, auto correct would convert the typed characters TY into this phrase while typing text.

Keypress Event

For performance reasons, the JavaScript keypress event is used to store contiguous character codes. If the SPACE key is pressed, the function is trynig to find the typed word in the dictionary of shortcuts. In case the word has been found, the shortcut is selected and replaced with the long text.

// dynamic character array
var charCodes = [];

// shortcut dictionary
var dict = {
    "TY": "Thanks for your request.",
    "AQ": "Let me know if you have additional questions.",
    "MY": "I look forward to meeting you.",
    "GD": "Have a great day.",
    "LONG": "This is another longer text.",
};

document.getElementById("txTemplateDesignerContainer").addEventListener("keypress", (event) => {

    // if SPACE is pressed
    if (event.charCode === 32) {

        // convert array to string to get typed word
        var typedWord = String.fromCharCode(...charCodes);

        // check word in dictionary
        if (dict[typedWord] != undefined) {

            // cancel SPACE for TXTextControl
            event.cancelBubble = true;

            // select shortcut and replace with long text
            TXTextControl.inputPosition.getTextPosition(function (startPos) {
                TXTextControl.select(startPos - typedWord.length, typedWord.length, function () {
                    TXTextControl.selection.setText(dict[typedWord] + " ");
                })
            })

        }

        // reset character array
        charCodes = [];
    } else {
        // add character to array
        charCodes.push(event.charCode);
    }

}, true);

Exceptions

The shortcut should be only replaced in case the SPACE key is pressed. In other situations such as the ENTER or TAB key, the shortcut should be ignored. The same is valid in case the input position has been changed to another location. In these cases, the character array charCodes of typed characters is emptied again.

TXTextControl.addEventListener("inputPositionChanged", function (position) {

    // if input position is is not coherent, reset character array
    if (position.textPosition < trackedInputPosition - 1 || position.textPosition > trackedInputPosition + 1) {
        charCodes = [];
    }

    // set current input position
    trackedInputPosition = position.textPosition;
})

document.getElementById("txTemplateDesignerContainer").addEventListener("keydown", (event) => {

    // reset character array for all keys including ENTER, TAB and others except SPACE
    if (event.keyCode < 0x30 && event.keyCode != 32) {
        charCodes = [];
    }

}, true);

Live Demo

We implemented this code as part of our online demos. Test this live by launching the demo application.

Auto Text Replacement Demo