PHP 7.3 reached end of support in December 2021 and Adobe Commerce 2.3.x reaches end of support in September 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.