PHP 7.3 reaches end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in April 2022. You may want to consider planning your upgrade now to Adobe Commerce 2.4.x and PHP 7.4.x to help maintain PCI compliance.

TrimInput widget

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.

The following example shows a PHTML file using the 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.

TrimInput Input Example