<!DOCTYPE html> <html lang=“en”>
<head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>What Input?</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <style> .test-row { margin-top: 50px; } input[type="text"], input[type="password"] { font-size: 16px; } /* indicator */ .input-display { border-radius: 3px; display: inline-block; padding: 0 3px; -webkit-transition: all 200ms; transition: all 200ms; } [data-whatinput="mouse"] .input-display.-mouse, [data-whatintent="mouse"] .input-intent.-mouse { background-color: #d9edf7; color: #31708f; } [data-whatinput="keyboard"] .-keyboard { background-color: #dff0d8; color: #3c763d; } [data-whatinput="touch"] .-touch { background-color: #fcf8e3; color: #8a6d3b; } /* links */ a:focus { position: relative; z-index: 1; } [data-whatinput="keyboard"] a:focus { box-shadow: 0 0 8px 2px rgba(60, 118, 61, 0.6); outline: 2px solid #3c763d; } /* form controls */ [data-whatinput="mouse"] .form-control:focus { border-color: #31708f; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(49, 112, 143, 0.6); } [data-whatinput="keyboard"] .form-control:focus { border-color: #3c763d; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(60, 118, 61, 0.6); } [data-whatinput="touch"] .form-control:focus { border-color: #8a6d3b; outline: 0; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(138, 109, 59, 0.6); } </style> <!--[if lte IE 8]> <script src="dist/lte-IE8.js"></script> <![endif]--> </head> <body> <div class="container"> <div class="page-header"> <h1>What Input?</h1> </div> <p class="lead">A global utility for tracking the current input method (<span class="input-display -mouse">mouse</span>, <span class="input-display -keyboard">keyboard</span> or <span class="input-display -touch">touch</span>), as well as the current <em>intent</em> (<span class="input-intent -mouse">mouse</span>).</p> <p>Tab, click or tap the links and form controls to see how What Input allows them to be styled differently.</p> <div class="well test-row"> <div class="row"> <div class="col-md-6"> <div class="list-group"> <a class="list-group-item" href="#">Cras justo odio</a> <a class="list-group-item" href="#">Dapibus ac facilisis in</a> <a class="list-group-item" href="#">Morbi leo risus</a> <a class="list-group-item" href="#">Porta ac consectetur ac</a> <a class="list-group-item" href="#">Vestibulum at eros</a> </div> </div> <div class="col-md-6"> <form> <div class="form-group"> <label for="exampleInputEmail1">Email address</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> </div> <div class="form-group"> <label for="exampleInputPassword1">Password</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div class="checkbox"> <label> <input type="checkbox"> Check me out </label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </div> </div> <footer> <p class="pull-right"> Check out the project <a href="https://github.com/ten1seven/what-input">on Github</a>. </p> <p> Made with <span class="text-danger">♥</span> at <a href="http://viget.com/">Viget</a>. </p> </footer> </div> <script src="dist/what-input.js"></script> <script> var links = document.querySelectorAll('a'); for (var i = 0, len = links.length; i < len; i++) { links[i].addEventListener('click', function(event) { console.log( '[script test] ' + whatInput.ask() ); event.preventDefault(); }); } </script> </body>
</html>