TX Text Control X15 allows the insertion and manipulation of text fields of type TXTextControl.ApplicationField class ╰ TX Text Control .NET for Windows Forms
╰ TXTextControl Namespace
╰ ApplicationField Class
The ApplicationField class supports text field formats of applications such as Microsoft Word. and TXTextControl.TextField class ╰ TX Text Control .NET for Windows Forms
╰ TXTextControl Namespace
╰ TextField Class
An instance of the TextField class represents a text field in a Text Control document. . A TextField is a TX Text Control internal field and ApplicationFields are MS Word compatible MergeFields, FormFields or any other supported field type.

Javascript: TXTextControl.MergeField object ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl.MergeField Object
Represents an MS Word specific MERGEFIELD field. can be added using the Reporting ribbon tab that allows the insertion of fields from a specified data source such as Json or an XML string. These fields can now be added programmatically using the JavaScript api ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
JavaScript API .

The following JavaScript code creates and inserts a new merge field into the document at the current input position:

var mergeField = new TXTextControl.MergeField();
mergeField.name = "company_name";
mergeField.text = "«" + mergeField.name + "»";
mergeField.editable = false;
TXTextControl.addMergeField(mergeField);
view raw tx.js hosted with ❤ by GitHub

The textFieldEntered event that can be attached using the Javascript: TXTextControl.addEventListener method ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl Object
╰ addEventListener Method
The addEventListener function registers event listener functions on the TXTextControl object. is fired when the input position enters a text field. The event arguments return the properties of the current field. In order to manipulate the field object directly, the Javascript: TXTextControl.getTextFields method ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl Object
╰ getTextFields Method
Obsolete. can be used which returns all fields or the field at the current input position.

The following JavaScript code changes the field text when the input position enters the text field:

function textFieldEnteredHandler(e) {
TXTextControl.getTextFields(function (e) {
var currentField = e[0];
currentField.text = "New Field Text";
}, true);
}
view raw tx.js hosted with ❤ by GitHub

ApplicationFields are technically all field types that are supported by MS Word including merge fields, content controls and legacy form fields. The following JavaScript code inserts a legacy form drop down field into the TX Text Control:

var comboBox = new TXTextControl.ApplicationField();
comboBox.typeName = "FORMDROPDOWN";
comboBox.parameters = ["w:name w:val=\"Dropdown1\"",
"w:enabled w:val=\"true\"",
"w:calcOnExit w:val=\"false\"",
"w:listEntry w:val=\"Test1\"",
"w:listEntry w:val=\"Test2\""];
comboBox.text = "ComboBox";
comboBox.editable = false;
comboBox.doubledInputPosition = true;
TXTextControl.addTextField(comboBox);
view raw tx.js hosted with ❤ by GitHub

In the document, form element fields are represented by their display text (as they would be printed or exported to PDF). All field objects provide a Javascript: TXTextControl.TextField.bounds property ╰ TX Text Control .NET Server for ASP.NET
╰ JavaScript API
╰ TXTextControl.TextField Object
╰ bounds Property
Obsolete. that provides the size and the location of a field. This information can be used to render the actual form element at that location. The following code renders an HTML drop down box at the field location:

function drawOverlay() {
_divOvr = document.getElementById("divOvr");
var sParams = "";
// create the options based on the drop down items
for (let param of _currentField.parameters) {
if (param.startsWith("w:listEntry")) {
var arrStr = param.split(/["]/);
sParams += "<option>" + arrStr[1] + "</option>";
}
}
// create a new html select object
if (!_divOvr) {
_divOvr = document.createElement("select");
_divOvr.className = "overlay";
_divOvr.id = "divOvr";
_divOvr.innerHTML = sParams;
_container.appendChild(_divOvr);
}
// retrieve the field location in the document
var fldPos = _currentField.bounds.location;
// and calculate the offset location and zoom factor
var x = _textView.offsetLeft + (fldPos.x - _txtViewLoc.x) * _zoom;
var y = _textView.offsetTop + (fldPos.y - _txtViewLoc.y) * _zoom;
// set position and size
_divOvr.style.fontSize = (8 * _zoom) + "pt";
_divOvr.style.zIndex = _textView.style.zIndex + 10;
_divOvr.style.left = x + "px";
_divOvr.style.width = (_currentField.bounds.size.width * _zoom) + "px";
_divOvr.style.minHeight = (_currentField.bounds.size.height * _zoom) + "px";
_divOvr.style.top = y + "px";
// add change event to change text of the field
// when an option has been selected
$('#divOvr').change(function () {
var val = $("#divOvr option:selected").val();
_currentField.text = val;
removeElement();
});
$('#divOvr').focus(function () {
this.selectedIndex = -1;
this.focus();
});
_divOvr.focus();
}
view raw tx.js hosted with ❤ by GitHub

The following screen cast shows the inserted drop down box in action. A custom button has been added to a new ribbon group to insert a drop down field.

Field overlays with TX Text Control

Try this on your own and download the sample hosted on GitHub.