Input control

Enhancement for standard HTML input control such as input[type=text], input[type=password], etc.

About

In Metro 4, you can use enhancement version of input control. To define it, add attribute data-role="input" to HTML input element. You can assign role input to any text inputs: text, password, email, etc.

                    <input type="text" data-role="input">
                

Prepend data

You can add prepend data to input field with attribute data-prepend="...".

                    <input type="text" data-role="input" data-prepend="User name: ">
                

Append data

You can add append data to input field with attribute data-append="...".

                    <input type="text" data-role="input" data-append=".00%">
                

Clear button

When Metro 4 create input component, him add to element two special buttons: clear-button and reveal-button. These buttons shown when input focused or user move mouse over input.

This button clear current value and flash it to default if default value is defined. You can set default value with attribute data-default-value="...". You can disable clear-button with attribute data-clear-button="false". You can change default icon for this button. To set your icon, use attribute data-clear-button-icon="...".

                    <p>Input</p>
                    <input type="text" data-role="input" class="">

                    <p>Input with default value 100</p>
                    <input type="text" data-role="input" data-default-value="100">

                    <p>Input without clear button</p>
                    <input type="text" data-role="input" data-clear-button="false">

                    <p>Custom clear button icon</p>
                    <input type="text" data-role="input" data-clear-button-icon="<span class='mif-cancel'></span>">
                

Reveal button

This button works with input[type=password] field. When user press this button, him can see input value. You can disable reveal-button with attribute data-reveal-button="false". You can change default icon for this button. To set your icon, use attribute data-reveal-button-icon="...".

                    <p>Input password</p>
                    <input type="password" data-role="input">

                    <p>Input without reveal button</p>
                    <input type="password" data-role="input" data-reveal-button="false">

                    <p>Custom reveal button icon</p>
                    <input type="password" data-role="input" data-reveal-button-icon="<span class='mif-lamp mif-2x'></span>">
                

Search button

You can enable search-button with attribute data-search-button="true". You can change default icon for this button. To set your icon, use attribute data-search-button-icon="...".

When user press this button:

1. If You define attribute data-search-button-click="custom", Metro 4 execute your function, defined with attribute data-on-search-button-click="..."
2. If you define attribute data-search-button-click="submit", Metro 4 submit a form, where search input is defined

                    <p>Input without search button</p>
                    <input type="text" data-role="input" data-search-button="true">

                    <p>Custom search button icon</p>
                    <input type="text" data-role="input" data-search-button="true"
                        data-search-button-icon="<span class='mif-rocket mif-2x'></span>">
                

Define search button click event

                    <script>
                        function mySubmitSearch(val){
                            alert('Custom submit function');
                        }
                    </script>
                    <form action="javascript:" onsubmit="alert('Form submit with self function');">
                        <p>Custom func</p>
                        <input type="text" data-role="input"
                            data-search-button-click="custom"
                            data-on-search-button-click="mySubmitSearch">

                        <p>Form submit func</p>
                        <input type="text" data-role="input">
                    </form>
                

History

Metro 4 input support history feature. To enable it feature, add attribute data-history="true" to input. This enhance the input field that shows you the last input values that has been recently entered. Use the up and down key's to scroll through previously typed input values. Use attribute data-prevent-submit="true" to cancel submitting form when user press Enter.

                    <input type="text" data-role="input" data-history="true">
                

Custom buttons

You can create custom button for input control with attribute data-custom-buttons="...". To add custom button, first-off - create array with your buttons and add array name as value for attribute data-custom-buttons. This array must be created before input component initiated.

                    <script>
                        var customButtons = [
                            {
                                html: "<span class='mif-user'></span>",
                                cls: "alert",
                                onclick: "alert('You press user button')"
                            },
                            {
                                html: "<span class='mif-cog'></span>",
                                cls: "warning",
                                onclick: "alert('You press cog button')"
                            }
                        ]
                    </script>

                    <input type="text" data-role="input" data-custom-buttons="customButtons">
                

Each button must be defined as object with three properties: html - button caption, cls - classes for custom button, onclick - event for button when user clicked on it.

Autocomplete

You can create input with autocomplete feature. To create it, use attributes: data-autocomplete, data-autocomplete-divider, data-autocomplete-list-height.

                    <input type="text" data-role="input" data-autocomplete="Ukraine, USA, Canada, Marokko, Singapur">
                

Options

Events

Methods

You can use methods to interact with input component: getHistory(), setHistory(history, append) - history: array or string, append - bool, clear(), toDefault(), enable(), disable(), toggleState().

                    var input = $(el).data('input');
                    input.clear();
                    input.toDefault();
                    input.toggleState();
                

Customize

You can customize your input with special attributes:

                    <input type="text" data-role="input"
                        data-cls-input="text-bold bg-dark fg-white text-center"
                        data-clear-button="false">