TrimInput widget

Overview

The TrimInput widget trims whitespace in an input field.

The TrimInput widget source is lib/web/mage/trim-input.js.

Initialize the TrimInput widget

For information about how to initialize a widget in a JS component or .phtml template, see the Initialize JavaScript topic.

The TrimInput widget is instantiated with the following:

1
$('#element').trimInput();

Where:

• #element is the selector of the input element to be trimmed.

Phtml template file examples using script:

1
2
3
4
5
6
7
8
9
10
<script>
    require([
        'jquery',
        'mage/trim-input'
    ], function ($) {
        'use strict';
        
        $("#element").trimInput();
    });
</script>

Code sample

This example shows how to initialize the TrimInput widget:

1
<input type="text" name="text" id="text" class="input-text" data-mage-init='{"mage/trim-input":{}}' placeholder="Type some text...">

Result

As a result, we have the text input field and the value of this input will be trimmed each time it is changed.