Framework | Framework

Button Chart Checkbox / Toggle Confirmation Popover DataTables DateTime Datepicker Email Error Page Error Messages Export CSV/PDF Form Upload Image/File Namespaces Number Plugins Scanner Select / Autocomplete Text / Textarea

Basic Text Input

Output: ____ // Event Type: ____

HTML

<input type="text" class="form-control" data-fd-control="text" 
    data-fd-callback="setOutputText" data-fd-parentid="100" />

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Keyup Text Input (Default Delay = 250ms)

Output: ____ // Event Type: ____

HTML

<input type="text" class="form-control" data-fd-control="text" 
    data-fd-callback="setOutputText" data-fd-iskeyup="true" />

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Keyup Text Input (Maxlength = 5)

Output: ____ // Event Type: ____

HTML

<input type="text" class="form-control" data-fd-control="text" 
    data-fd-callback="setOutputText" data-fd-iskeyup="true" data-fd-maxlength="5" />

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Basic Textarea

Output: ____ // Event Type: ____

HTML

<textarea class="form-control" data-fd-control="textarea"
    data-fd-callback="setOutputText"></textarea>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};

Textarea: Save on Keyup (delay = 250ms)

Output: ____ // Event Type: ____

HTML

<textarea class="form-control" data-fd-control="textarea"
    data-fd-callback="setOutputText"
    data-fd-iskeyup="true"></textarea>

JavaScript

FD.Page.setOutputText = function (data, event) {
    this.element.closest('.row').find('.output-data').text(data.value);
    this.element.closest('.row').find('.output-event').text(event.type);
};