Contextual toolbars are very helpful to provide users quick access to the most common functions and settings. A smart implementation helps to increase the productivity and user experience. This article shows how to implement a contextual toolbar to manipulate form fields in a document.

Sample Implementation

The following screen video shows the sample implementation of a contextual toolbar to select all text and to remove text from a form field:

Contextual Toolbar

Live Demo

See this demo implementation in our live demos. We added this contextual toolbar to one of the live samples.

Live Demo

The contextual toolbar can be any DIV element you design in your page or a partial view:

Loading...

In case the user enters a form field, the textFieldEntered event is fired:

Loading...

In the event handler, the context menu is shown (using the drawContextMenu method) in case the field is an editable form field:

Loading...

The drawContextMenu function positions the context menu under the selected form field and shows it by changing the display CSS property:

Loading...

The full JavaScript function is shown below. All functions are encapsulated in a private object ContextMenu with 2 public methods select and removeText:

Loading...

The full implementation can be found in the demo project on GitHub.