TrimInput widget

The TrimInput widget trims whitespace in an input field.

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

Initialize

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:

Copy
$('#element').trimInput();
Copied to your clipboard
$('#element').trimInput();

Where:

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

The following example shows a PHTML file using the script:

Copy
<script>
    require([
        'jquery',
        'mage/trim-input'
    ], function ($) {
        'use strict';

        $("#element").trimInput();
    });
</script>
Copied to your clipboard
<script>
    require([
        'jquery',
        'mage/trim-input'
    ], function ($) {
        'use strict';

        $("#element").trimInput();
    });
</script>

Code sample

This example shows how to initialize the TrimInput widget:

Copy
<input type="text" name="text" id="text" class="input-text" data-mage-init='{"mage/trim-input":{}}' placeholder="Type some text...">
Copied to your clipboard
<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.

Last updated 9/11/2023

Was this helpful?

Yes

No