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.

AutoCorrect with TX Text Control

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);
view raw test.js hosted with ❤ by GitHub

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);
view raw test.js hosted with ❤ by GitHub

Live Demo

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

Auto Text Replacement Demo