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="Metro 4 lets you easily add handlers for keyboard events anywhere in your site."> <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>Hotkeys - Metro 4 :: Popular HTML, CSS and JS library</title> </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="#">Hotkeys</a></li> <li class="toc-entry"><a href="#_hk_binding">Binding</a></li> <li class="toc-entry"><a href="#_hk_events">Events</a></li> <li class="toc-entry"><a href="#_hk_custom">Custom</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>Hotkeys</h1> <p class="text-leader"> Metro 4 lets you easily add handlers for keyboard events anywhere in your site. </p>  <p class="remark warning"> This feature works for desktop browsers. </p> <h3 id="_hk_binding">Binding</h3> <p> To bind <code>hotkey</code> add attribute <code>data-hotkey</code> with hotkey value to your control. </p> <div class="example"> <div class="clear mb-2"> <ul class="d-menu pos-static open"> <li><a href="#" onclick="alert('Ctrl+1 is clicked')" data-hotkey="Ctrl+1">Press Ctrl+1</a></li> </ul> </div> <div class="clear mb-2"> <button class="button" data-hotkey="Alt+2" onclick="alert('Alt+2 clicked!')">Press Alt+2</button> </div> <div class="clear mb-2"> <a href="#" data-hotkey="Shift+3" onclick="alert('Shift+3 clicked!')">Press Shift+3</a> </div> </div> <pre><code class="html"> <ul class="v-menu"> <li> <a href="#" onclick="alert('Ctrl+1 is clicked')" data-hotkey="Ctrl+1">Press Ctrl+1</a> </li> </ul> <button class="button" data-hotkey="Alt+2" onclick="alert('Alt+2 clicked!')">Press Alt+2</button> <a href="#" data-hotkey="Shift+3" onclick="alert('Shift+3 clicked!')">Press Shift+3</a> </code></pre> <h6>Note</h6> <p> Modifiers are not case sensitive (Ctrl == ctrl == cTRL). If you want to use more than one modifier (e.g. alt+ctrl+z) you should define them by an alphabetical order e.g. <code>alt+ctrl+shift</code>. Hotkeys aren't tracked if you're inside of an input element (unless you explicitly bind the hotkey directly to the input). This helps to avoid conflict with normal user typing. </p> <div class="example"> <a href="#" data-hotkey="alt+ctrl+shift+z" onclick="alert('alt+ctrl+shift+z clicked!')">Press alt+ctrl+shift+z</a> </div> <pre><code class="html"> <a href="#" data-hotkey="alt+ctrl+shift+z" onclick="alert('alt+ctrl+shift+z clicked!')">Press alt+ctrl+shift+z</a> </code></pre> <p> Hotkeys aren't tracked if the user is focused within an input element or any element that has contenteditable="true" unless you bind the hotkey directly to the element. This helps to avoid conflict with normal user typing. If you don't want this, you can change the booleans of the following to suit before <code>metro.js</code> loaded: </p> <ul> <li>METRO_HOTKEYS_FILTER_CONTENT_EDITABLE</li> <li>METRO_HOTKEYS_FILTER_INPUT_ACCEPTING_ELEMENTS</li> <li>METRO_HOTKEYS_FILTER_TEXT_INPUTS</li> </ul> <pre><code class="javascript"> <script> METRO_HOTKEYS_FILTER_CONTENT_EDITABLE = false; </script> <script src="metro/js/metro.js?ver=@@b-version"></script> </code></pre> <h3 id="_hk_events">Events</h3> <p> In Metro 4 hotkeys triggered when <code>keyup</code> fired. To bubble up your hotkey event set <code>METRO_HOTKEYS_BUBBLE_UP</code> to <code>true</code> before <code>metro.js</code> loaded. </p> <h3>Addendum</h3> <p> Firefox is the most liberal one in the manner of letting you capture all short-cuts even those that are built-in in the browser such as Ctrl-t for new tab, or Ctrl-a for selecting all text. You can always bubble them up to the browser by returning true in your handler. </p> <p> Others, (IE) either let you handle built-in short-cuts, but will add their functionality after your code has executed. Or (Opera/Safari) will not pass those events to the DOM at all. </p> <p class="remark alert"> So, if you bind Ctrl-Q or Alt-F4 and your Safari/Opera window is closed don't be surprised. </p>  <h3 id="_hk_custom">Custom binding</h3> <p> For custom hotkeys you can use next supported event types: <code>keydown</code>, <code>keyup</code> and <code>keypress</code>. To create own event: </p> <pre><code class="javascript">  $(expression).bind(types, keys, handler); $(expression).unbind(types, handler); $(document).bind('keydown', 'ctrl+a', fn); // e.g. replace '$' sign with 'EUR' $('input.foo').bind('keyup', '$', function(){ this.value = this.value.replace('$', 'EUR'); }); </code></pre> <pre><code class="javascript">  $(expression).on(types, null, keys, handler); $(expression).off(types, handler); $(document).on('keydown', null, 'ctrl+a', fn); // e.g. replace '$' sign with 'EUR' $('input.foo').on('keyup', null, '$', function(){ this.value = this.value.replace('$', 'EUR'); }); </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>