Products Technologies Demo Docs Blog Support Company

This blog post contains outdated information.

The cited code snippets may be workarounds, and be part of the official API in the meantime.

JavaScript: Removing TextFields on Backspace and Delete

This short JavaScript code snippet shows how to remove fields when pressing the Delete and Backspace key.

JavaScript: Removing TextFields on Backspace and Delete

Using the JavaScript api, a document can be manipulated in the HTML5-based rich text editor. Version X15 already contains a solid number of classes and methods to fulfil common tasks. We are working on a huge update for this interface for version X16 where you will see many new classes and methods available. The ultimate goal is to provide a complete API comparable to the API that is useable with TXTextControl.ServerTextControl class.

We received many requests last week regarding text fields and how to remove them programmatically - specifically using the Backspace and Delete keys. By default, fields are not editable and deletable. The following code snippet shows how to remove the field at the current input position when the user is pressing the Backspace or Delete key. This code also works, if these keys are pressed at the beginning or the end of a field in order to remove it.

window.onload = function () {
    // attach keyDown event
    document.addEventListener("keydown", keyDownHandler, false);
};

function keyDownHandler(e) {
    var keyCode = e.keyCode;

    // set fields to editable
    TXTextControl.textFieldsEditable = true;

    // if DELETE or BACKSPACE
    if (keyCode == 8 || keyCode == 46) {
        TXTextControl.getTextFields(function (e) { // get field at input positions
            if (typeof e !== 'undefined' && e.length > 0) { // if array is defined
                // remove the field at the input position
                TXTextControl.removeTextField(e[0], false);
            }
        }, true);
    }
}

Happy coding!

Stay in the loop!

Subscribe to the newsletter to receive the latest updates.

Also See

This post references the following in the documentation:

  • TXTextControl.ServerTextControl Class

Related Posts

AngularASP.NETJavaScript

Using the Document Editor in SPA Applications using the removeFromDom Method

This article shows how to use the removeFromDom method to remove the Document Editor from the DOM when it is no longer needed. This is useful when the Document Editor is used in a Single Page…


ASP.NETJavaScriptRelease

Sneak Peek 31.0: Customizing the Context Menu of the ASP.NET Document Editor

The online Document Editor of TX Text Control .NET Server 31.0 provides a fully customizable context menu. The context menu contents can be accessed through a new contextMenuOpening event that…


AngularASP.NETJavaScript

TXTextControl.Web: Creating a Custom ButtonBar using the InputFormat Class

TX Text Control X18 implements the InputFormat class in the JavaScript API that enables developers to build custom button bars.


AngularASP.NETJavaScript

New JavaScript API Calls for Typical MailMerge Tasks

This article shows how to use the improved JavaScript API for typical MailMerge tasks such as inserting merge blocks.


ASP.NETCollaborationDocument Editing

The Future of Document Collaboration

This article explains various document collaboration strategies that can be implemented based on TX Text Control web technologies.