You are reading the documentation for version 2.2. Magento 2.3 is the latest version available. Ensure you are reading the documentation for your version of Magento.

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