# Implementing Text-As-You-Type Auto Correct Replacements using JavaScript > Text-As-You-Type Auto Correct is a popular feature that replaces a specific phrase or character combination with a longer text while typing. This sample shows how to implement this feature using JavaScript. - **Author:** Bjoern Meyer - **Published:** 2023-01-17 - **Modified:** 2025-11-16 - **Description:** Text-As-You-Type Auto Correct is a popular feature that replaces a specific phrase or character combination with a longer text while typing. This sample shows how to implement this feature using JavaScript. - **2 min read** (397 words) - **Tags:** - ASP.NET - ASP.NET Core - Auto Text - **Web URL:** https://www.textcontrol.com/blog/2023/01/17/implementing-auto-correct-replacements-using-javascript/ - **LLMs URL:** https://www.textcontrol.com/blog/2023/01/17/implementing-auto-correct-replacements-using-javascript/llms.txt - **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/01/17/implementing-auto-correct-replacements-using-javascript/llms-full.txt --- 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](https://s1-www.textcontrol.com/assets/dist/blog/2023/01/17/a/assets/autocorrect.gif "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); ``` ### 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 ](https://demos.textcontrol.com/chapter/topic/RichTextEditor/AutoText) --- ## About Bjoern Meyer As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano. - [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/) - [X](https://x.com/txbjoern) - [GitHub](https://github.com/bjoerntx) --- ## Related Posts - [WeAreDevelopers World Congress Europe 2026 Wrap Up: Record Breaking Days in Berlin](https://www.textcontrol.com/blog/2026/07/13/wearedevelopers-world-congress-europe-2026-wrap-up-record-breaking-days-in-berlin/llms.txt) - [C# Document Generation: A Developer's Guide for .NET](https://www.textcontrol.com/blog/2026/07/08/csharp-document-generation-developer-guide-for-dotnet/llms.txt) - [Validating PDF/UA Documents in .NET C#: A Practical Guide](https://www.textcontrol.com/blog/2026/07/06/validating-pdf-ua-documents-in-dotnet-csharp/llms.txt) - [See Text Control at WeAreDevelopers World Congress Europe 2026 in Berlin](https://www.textcontrol.com/blog/2026/07/06/see-text-control-at-wearedevelopers-world-congress-europe-2026-in-berlin/llms.txt) - [DWX 2026 Wrap-Up: Four Days of Innovation, Conversations, and Enterprise Document Solutions](https://www.textcontrol.com/blog/2026/07/03/dwx-2026-wrap-up-four-days-of-innovation-conversations-and-enterprise-document-solutions/llms.txt) - [Create SignFabric Envelopes from Mail Merge Templates in .NET C#](https://www.textcontrol.com/blog/2026/06/23/create-signfabric-envelopes-from-mail-merge-templates-using-dotnet-csharp/llms.txt) - [Convert SSRS RDL Reports to DOCX and TX Text Control Templates in .NET C#](https://www.textcontrol.com/blog/2026/06/22/convert-ssrs-rdl-reports-to-docx-and-tx-text-control-templates-in-dotnet-csharp/llms.txt) - [Export Document Tables to CSV in .NET C#](https://www.textcontrol.com/blog/2026/06/19/export-document-tables-to-csv-in-dotnet-csharp/llms.txt) - [Major SignFabric Updates: Stronger Audit Trails, Validation, and Recipient Workflows](https://www.textcontrol.com/blog/2026/06/17/major-signfabric-updates-stronger-audit-trails-validation-and-recipient-workflows/llms.txt) - [Text Control Expands North American Conference Presence with WeAreDevelopers World Congress North America](https://www.textcontrol.com/blog/2026/06/12/text-control-expands-north-american-conference-presence-with-wearedevelopers-world-congress-north-america/llms.txt) - [Converting HTML to Markdown in C# .NET](https://www.textcontrol.com/blog/2026/06/11/converting-html-to-markdown-in-csharp-dot-net/llms.txt) - [Beyond WebSockets: A Glimpse into the Future of Document Editing with WebAssembly](https://www.textcontrol.com/blog/2026/06/10/beyond-websockets-glimpse-future-document-editing-webassembly/llms.txt) - [Showcasing the Future of Document Processing at Developer World DWX 2026](https://www.textcontrol.com/blog/2026/06/08/showcasing-the-future-of-document-processing-at-dwx-developer-week-2026/llms.txt) - [PDF Security Explained: Passwords, Permissions, Encryption and Digital Signatures in C# .NET](https://www.textcontrol.com/blog/2026/06/08/pdf-security-explained-passwords-permissions-encryption-and-digital-signatures-in-csharp-dotnet/llms.txt) - [NDC Copenhagen 2026: Great Days in the Heart of Copenhagen's Developer Community](https://www.textcontrol.com/blog/2026/06/05/ndc-copenhagen-2026-great-days-in-the-heart-of-copenhagens-developer-community/llms.txt) - [Automatically Mapping TX Text Control Form Fields to JSON Data in .NET C#](https://www.textcontrol.com/blog/2026/06/03/automatically-mapping-tx-text-control-form-fields-to-json-data-in-dotnet-csharp/llms.txt) - [Getting Started with SignFabric: From Clone to Your First Signature Envelope](https://www.textcontrol.com/blog/2026/06/02/getting-started-with-signfabric-from-clone-to-your-first-signature-envelope/llms.txt) - [We Never Pause - Join Us at NDC Copenhagen 2026](https://www.textcontrol.com/blog/2026/05/27/we-never-pause-join-us-at-ndc-copenhagen-2026/llms.txt) - [MD DevDays 2026: Record Attendance, Packed Expo Hall, and Three Great Days in Magdeburg](https://www.textcontrol.com/blog/2026/05/21/md-devdays-2026-record-attendance-packed-expo-hall-and-three-great-days-in-magdeburg/llms.txt) - [TX Text Control 34.0 SP4 is Now Available: What's New in the Latest Version](https://www.textcontrol.com/blog/2026/05/20/tx-text-control-34-0-sp4-is-now-available/llms.txt) - [Techorama 2026: Welcome to The Document Forge](https://www.textcontrol.com/blog/2026/05/15/techorama-2026-welcome-to-the-document-forge/llms.txt) - [Signed CycloneDX SBOMs for CRA Compliance Available for Text Control Products](https://www.textcontrol.com/blog/2026/05/08/signed-cyclonedx-sboms-for-cra-compliance-available-for-text-control-products/llms.txt) - [Introducing SignFabric: An Open Source, Enterprise-Ready E-Sign Platform Built with TX Text Control](https://www.textcontrol.com/blog/2026/05/06/introducing-signfabric-an-open-source-enterprise-ready-esign-platform-built-with-tx-text-control/llms.txt) - [TX Text Control vs IronPDF for Enterprise PDF Workflows: Complete Comparison Guide](https://www.textcontrol.com/blog/2026/04/28/tx-text-control-vs-ironpdf-for-enterprise-pdf-workflows-complete-comparison-guide/llms.txt) - [Building a Modern Track Changes Review Workflow in ASP.NET Core C#](https://www.textcontrol.com/blog/2026/04/28/building-a-modern-track-changes-review-workflow-in-aspnet-core-csharp/llms.txt)