metro4

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="twitter:site" content="@metroui"> <meta name="twitter:creator" content="@pimenov_sergey"> <meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Metro 4 Components Library"> <meta name="twitter:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta name="twitter:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:url" content="https://metroui.org.ua/v4/index.html"> <meta property="og:title" content="Metro 4 Components Library"> <meta property="og:description" content="Metro 4 is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery."> <meta property="og:type" content="website"> <meta property="og:image" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:secure_url" content="https://metroui.org.ua/images/m4-logo-social.png"> <meta property="og:image:type" content="image/png"> <meta property="og:image:width" content="968"> <meta property="og:image:height" content="504"> <meta name="author" content="Sergey Pimenov"> <meta name="description" content="Component for entering data without a keyboard. Excellent to create the element for pin enter. The most popular HTML, CSS, and JS library in Metro style."> <meta name="keywords" content="HTML, CSS, JS, Metro, CSS3, Javascript, HTML5, UI, Library, Web, Development, Framework"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <link rel="icon" href="favicon.ico" type="image/x-icon"> <link href="metro/css/metro-all.css?ver=@@b-version" rel="stylesheet"> <link href="highlight/styles/github.css" rel="stylesheet"> <link href="docsearch/docsearch.min.css" rel="stylesheet"> <link href="css/site.css" rel="stylesheet"> <title>Keypad - Metro 4 :: Popular HTML, CSS and JS library</title> <style> .radio-size { width: 120px; } </style> </head> <body class="m4-cloak" data-role="htmlcontainer" data-html-source="header.html" data-insert-mode="prepend"> <div class="container-fluid"> <div class="row flex-xl-nowrap"> <div class="cell-md-3 cell-xl-2 pr-0 border-right bd-light" id="sidenav" data-role="htmlcontainer" data-html-source="sidenav.html" data-insert-mode="replace" data-on-load="initDocSearchEngine()"></div> <div class="d-none d-block-xl cell-xl-2 order-2 border-left bd-light toc-wrapper"> <h5>Table of contents</h5> <hr/> <ul class="toc-nav"> <li class="toc-entry"><a href="#">Keypad</a></li> <li class="toc-entry"><a href="#_keypad_about">About</a></li> <li class="toc-entry"> <a href="#_keypad_options">Options</a> <ul> <li class="toc-entry"><a href="#_keypad_options_characters">Character set</a></li> <li class="toc-entry"><a href="#_keypad_options_position">Keys position</a></li> <li class="toc-entry"><a href="#_keypad_options_target">Target</a></li> <li class="toc-entry"><a href="#_keypad_options_constraints">Constraints</a></li> <li class="toc-entry"><a href="#_keypad_options_shuffle">Shuffle</a></li> <li class="toc-entry"><a href="#_keypad_options_customize">Customize</a></li> </ul> </li> <li class="toc-entry"><a href="#_keypad_events">Events</a></li> <li class="toc-entry"><a href="#_keypad_methods">Methods</a></li> </ul> </div> <main class="cell-md-9 cell-xl-8 order-1 pr-1-sx pl-1-sx pr-5-md pl-5-md"> <div class="place-right d-none d-block-lg" style="width: 200px;"> <img src="images/logo.png" class="w-100"> </div> <h1>Keypad</h1> <p class="text-leader"> Component for entering data without a keyboard. Excellent to create the element for pin enter. </p>  <h3 id="_keypad_about">About</h3> <p> In Metro 4, creating a keypad is very simple. To create <code>keypad</code> add attribute <code>data-role="keypad"</code> to <code><input></code> element. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <input type="text" data-role="keypad" placeholder="Enter pin"> </div> <div class="cell-md-6"> <input type="password" data-role="keypad" placeholder="Enter pin"> </div> </div> </div> <pre><code class="html"> <input type="text" data-role="keypad" placeholder="Enter pin"> <input type="password" data-role="keypad" placeholder="Enter pin"> </code></pre> <h3 id="_keypad_options">Options</h3> <p> The streamer contains a number of options for defining behavior: </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Option</th> <th>Data-*</th> <th>Default</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>keySize</td> <td><code>data-key-size</code></td> <td>32</td> <td>Can be a number. Key button dimension in pixels</td> </tr> <tr> <td>keys</td> <td><code>data-keys</code></td> <td>1, 2, 3, 4, 5, 6, 7, 8, 9, 0</td> <td>Can be a string. The character set. This a string with a comma delimiter.</td> </tr> <tr> <td>target</td> <td><code>data-target</code></td> <td>null</td> <td>Selector (class or id) for additional target for value.</td> </tr> <tr> <td>length</td> <td><code>data-length</code></td> <td>0</td> <td>Can be a number. This is an internal constraint. If value more than 0, a user can't enter a value with length more then length value.</td> </tr> <tr> <td>shuffle</td> <td><code>data-shuffle</code></td> <td>false</td> <td>Can be true or false. If a value for this option is true, keys can be shuffled after each key entering.</td> </tr> <tr> <td>shuffleCount</td> <td><code>data-shuffle-count</code></td> <td>3</td> <td>Can be number. The number of shuffling of the array of characters</td> </tr> <tr> <td>position</td> <td><code>data-position</code></td> <td>bottom-left</td> <td>Keys position. Can be a: left, top-left, top, top-right, right, bottom-right, bottom, bottom-left.</td> </tr> <tr> <td>dynamicPosition</td> <td><code>data-dynamic-position</code></td> <td>false</td> <td>Can be true or false. If true - keys wrapper change position after key click.</td> </tr> <tr> <td>serviceButtons</td> <td><code>data-service-buttons</code></td> <td>true</td> <td>Can be true or false. If a value for this option is a false, service buttons (backspace, clear) will not be drawing.</td> </tr> <tr> <td>showValue</td> <td><code>data-show-value</code></td> <td>true</td> <td>Can be true or false. If a value for this option is a false, the result value will not be drawing on the input element.</td> </tr> <tr> <td>open</td> <td><code>data-open</code></td> <td>false</td> <td>Can be true or false. If a value for this option is a true, a keys showing always.</td> </tr> <tr> <td>sizeAsKeys</td> <td><code>data-size-as-keys</code></td> <td>false</td> <td>Can be true or false. If a value for this option is a true, a size of inputs set to size equal to keys wrapper size.</td> </tr> <tr> <td>clsKeypad</td> <td><code>data-cls-keypad</code></td> <td></td> <td>Additional class for keypad</td> </tr> <tr> <td>clsInput</td> <td><code>data-cls-input</code></td> <td></td> <td>Additional class for input field</td> </tr> <tr> <td>clsKeys</td> <td><code>data-cls-keys</code></td> <td></td> <td>Additional class for keys wrapper</td> </tr> <tr> <td>clsKey</td> <td><code>data-cls-key</code></td> <td></td> <td>Additional class for each key</td> </tr> <tr> <td>clsServiceKey</td> <td><code>data-cls-service-key</code></td> <td></td> <td>Additional class for each service key</td> </tr> <tr> <td>clsBackspace</td> <td><code>data-cls-backspace</code></td> <td></td> <td>Additional class for backspace key</td> </tr> <tr> <td>clsClear</td> <td><code>data-cls-clear</code></td> <td></td> <td>Additional class for clear key</td> </tr> </tbody> </table> <p> Below, some options will be discussed in more detail. </p> <h4 id="_keypad_options_characters">Character set</h4> <p> By default keypad contains numbers from 0 to 9. You can change default character set with attribute <code>data-keys</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <h6>Default set</h6> <input type="text" data-role="keypad" placeholder="Enter pin"> </div> <div class="cell-md-6"> <h6>Custom set</h6> <input type="text" data-role="keypad" placeholder="Enter pin" data-keys="q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m"> </div> </div> </div> <pre><code class="html"> <input type="text" data-role="keypad" data-keys="q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m"> </code></pre> <h4 id="_keypad_options_position">Keys position</h4> <p> By default keys showing on bottom-left from input. You can change <code>position</code> with attribute <code>data-position</code>. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <div class="p-2 bg-light"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="bottom-left" data-caption="bottom-left" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="bottom" data-caption="bottom" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="bottom-right" data-caption="bottom-right" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="top-left" data-caption="top-left" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="top" data-caption="top" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="top-right" data-caption="top-right" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="right" data-caption="right" onclick="$('#keypad_position').attr('data-position', this.value)"> <input data-cls-element="radio-size" name="keypad_position" type="radio" data-role="radio" value="left" data-caption="left" onclick="$('#keypad_position').attr('data-position', this.value)" checked > </div> </div> <div class="cell-md-6 flex-self-center pl-4 pr-4"> <input type="text" data-role="keypad" id="keypad_position" data-open="true" data-position="left" data-cls-keys="bg-red fg-white" data-cls-service-key="bg-darkRed fg-white"> </div> </div> </div> <p> Also you can use attribute <code>data-dynamic-position</code> to change keys position after user key clicked. </p> <div class="example"> <input type="text" data-role="keypad" data-dynamic-position="true"> </div> <pre><code class="html"> <input type="text" data-role="keypad" data-dynamic-position="true"> </code></pre>  <h4 id="_keypad_options_target">Additional target for value</h4> <p> You can set <strong>additional</strong> target for <code>value</code>. To set additional target for value use attribute <code>data-target</code> with target selector. <strong>Selector</strong> - a string containing a selector expression to match elements against. </p> <div class="example"> <div class="row"> <div class="cell-md-6"> <input type="text" data-role="keypad" placeholder="Enter pin" data-target="#keypad_target"> </div> <div class="cell-md-6"> <input type="text" placeholder="Mirror pin" id="keypad_target" readonly> </div> </div> </div> <pre><code> <input type="text" data-role="keypad" data-target="#keypad_target"> <input type="text" id="keypad_target" readonly> </code></pre> <h4 id="_keypad_options_constraints">Constraints</h4> <p> You can set attribute <code>data-length</code> to limit the number of characters to be entered. </p> <div class="example"> <input type="text" data-role="keypad" placeholder="Enter the six-digit pin" data-length="6"> </div> <pre><code> <input type="text" data-role="keypad" placeholder="Enter the six-digit pin" data-length="6"> </code></pre> <h4 id="_keypad_options_shuffle">Shuffle</h4> <p> You can use attribute <code>data-shuffle</code> to change keys data position after each key entering. </p> <div class="example"> <input type="text" data-role="keypad" data-shuffle="true"> </div> <pre><code> <input type="text" data-role="keypad" data-shuffle="true"> </code></pre> <p> Also you can combine <code>shuffle</code> action with <code>dynamic position</code>. </p> <div class="example"> <input type="text" data-role="keypad" data-shuffle="true" data-dynamic-position="true"> </div> <pre><code> <input type="text" data-role="keypad" data-shuffle="true" data-dynamic-position="true"> </code></pre> <h4 id="_keypad_options_customize">Customize</h4> <p> Component <code>keypad</code> contains special options for customizing. To customize keypad use options with prefix <code>cls</code> or relevant attributes <code>data-cls-*</code>. </p> <div class="example"> <input type="text" data-role="keypad" data-position="top" data-cls-keypad="info" data-cls-input="bg-green fg-white" data-cls-keys="bg-cyan fg-white" data-cls-backspace="bg-darkOrange fg-white" data-cls-clear="bg-darkRed fg-white" > </div> <pre><code class="html"> <input type="text" data-role="keypad" data-position="top" data-cls-keypad="info" data-cls-input="bg-green fg-white" data-cls-keys="bg-cyan fg-white" data-cls-backspace="bg-darkOrange fg-white" data-cls-clear="bg-darkRed fg-white"> </code></pre> <h3 id="_keypad_events">Events</h3> <p> When <code>keypad</code> works, it generated the numbers of events. You can use callback for this event to behavior with component. </p> <table class="table cell-border table-border options-table"> <thead> <tr> <th>Event</th> <th>Data-*</th> <th>Desc</th> </tr> </thead> <tbody> <tr> <td>onChange(val, el)</td> <td><code>data-on-change</code></td> <td>Fired when value changed</td> </tr> <tr> <td>onClear(el)</td> <td><code>data-on-clear</code></td> <td>Fired when user click clear button</td> </tr> <tr> <td>onBackspace(value, el)</td> <td><code>data-on-backspace</code></td> <td>Fired when user click backspace button</td> </tr> <tr> <td>onShuffle(new_keys_order, keys, el)</td> <td><code>data-on-shuffle</code></td> <td>Fired when keys is shuffling</td> </tr> <tr> <td>onKey(key, value, el)</td> <td><code>data-on-key</code></td> <td>Fired when user click key</td> </tr> <tr> <td>onKeypadCreate(el)</td> <td><code>data-on-keypad-create</code></td> <td>Fired when keypad is created</td> </tr> </tbody> </table> <div class="example"> <div class="row"> <div class="cell-md-6"> <input placeholder="Enter a pin" type="text" data-role="keypad" data-on-change="$('#change_target').val(arguments[0])"> </div> <div class="cell-md-6"> <input type="text" data-role="input" id="change_target" data-prepend="Pin is: " data-clear-button="false" readonly> </div> </div> </div> <pre><code> <div class="row"> <div class="cell-md-6"> <input placeholder="Enter a pin" type="text" data-role="keypad" data-on-change="$('#change_target').val(arguments[0])"> </div> <div class="cell-md-6"> <input type="text" data-role="input" id="change_target" data-prepend="Pin is: " data-clear-button="false" readonly> </div> </div> </code></pre> <h3 id="_keypad_methods">Methods</h3> <p> Component <code>keypad</code> contains method to interact with keypad. </p> <ul> <li><strong>val(v)</strong> - get or set value</li> <li><strong>open()</strong> - open keys panel</li> <li><strong>close()</strong> - close keys panel</li> <li><strong>setPosition(pos)</strong> - set new position</li> <li><strong>shuffleKeys(iteration)</strong> - shuffle</li> </ul> <div class="example"> <div class="row"> <div class="cell-md-6"> <button class="button" onclick="$('#keypad_methods').data('keypad').shuffleKeys(10)">Shuffle keys</button> </div> <div class="cell-md-6"> <input data-role="keypad" id="keypad_methods" data-open="true" data-position="top"> </div> </div> </div> <pre><code class="html"> <div class="row"> <div class="cell-md-6"> <button class="button" onclick="$('#keypad_methods').data('keypad').shuffleKeys(10)"> Shuffle keys </button> </div> <div class="cell-md-6"> <input data-role="keypad" id="keypad_methods" data-open="true" data-position="top"> </div> </div> </code></pre> </main> </div> </div> <script src="docsearch/docsearch.min.js"></script> <script src="js/jquery-3.3.1.min.js"></script> <script src="metro/js/metro.js?ver=@@b-version"></script> <script src="highlight/highlight.pack.js"></script> <script src="js/clipboard.min.js"></script> <script src="js/site.js"></script>    </body> </html>