widget-trim-input.md

group	subgroup	title	contributor_name	contributor_link
javascript-developer-guide	3_Widgets	TrimInput widget	Atwix	https://www.atwix.com/

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:

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

Where:

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

The following example shows a PHTML file using the script:

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

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

Code sample

This example shows how to initialize the TrimInput widget:

<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.


[lib/web/mage/trim-input.js]: {{ site.mage2bloburl }}/{{ page.guide_version }}/lib/web/mage/trim-input.js [Initialize JavaScript]: {{page.baseurl}}/javascript-dev-guide/javascript/js_init.html