keyboard.html (4285B)
1 <?xml version="1.0"?> 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 3 <!-- This Source Code Form is subject to the terms of the Mozilla Public 4 - License, v. 2.0. If a copy of the MPL was not distributed with this 5 - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> 6 7 <head> 8 <title>Testing Javascript</title> 9 <meta name="viewport" content="user-scalable=no"> 10 <script type="text/javascript"> 11 const seen = {}; 12 13 function updateResult(event) { 14 document.getElementById('result').innerText = event.target.value; 15 } 16 17 function displayMessage(message) { 18 document.getElementById('result').innerText = message; 19 } 20 21 function appendMessage(message) { 22 document.getElementById('result').innerText += " " + message + " "; 23 } 24 </script> 25 </head> 26 27 <body> 28 <h1>Type Stuff</h1> 29 30 <div id="resultContainer"> 31 Result: <p id="result"></p> 32 </div> 33 34 <div> 35 <form action="#"> 36 <p> 37 <label>keyDown: <input type="text" id="keyDown" onkeydown="updateResult(event)"/></label> 38 <label>keyPress: <input type="text" id="keyPress" onkeypress="updateResult(event)"/></label> 39 <label>keyUp: <input type="text" id="keyUp" onkeyup="updateResult(event)"/></label> 40 <label>change: <input type="text" id="change" onchange="updateResult(event)"/></label> 41 </p> 42 <p> 43 <label>change: 44 <input type="checkbox" id="checkbox" value="checkbox thing" onchange="updateResult(event)"/> 45 </label> 46 </p> 47 <p> 48 <label>keyDown: 49 <textarea id="keyDownArea" onkeydown="updateResult(event)" rows="2" cols="15"></textarea> 50 </label> 51 <label>keyPress: 52 <textarea id="keyPressArea" onkeypress="updateResult(event)" rows="2" cols="15"></textarea> 53 </label> 54 <label>keyUp: 55 <textarea id="keyUpArea" onkeyup="updateResult(event)" rows="2" cols="15"></textarea> 56 </label> 57 </p> 58 <p> 59 <select id="selector" onchange="updateResult(event)"> 60 <option value="foo">Foo</option> 61 <option value="bar">Bar</option> 62 </select> 63 </p> 64 </form> 65 </div> 66 67 <div id="formageddon"> 68 <form action="#"> 69 Key Up: <input type="text" id="keyUp" onkeyup="javascript:updateContent(this)"/><br/> 70 Key Down: <input type="text" id="keyDown" onkeydown="javascript:updateContent(this)"/><br/> 71 Key Press: <input type="text" id="keyPress" onkeypress="javascript:updateContent(this)"/><br/> 72 Change: <input type="text" id="change" onkeypress="javascript:displayMessage('change')"/><br/> 73 <textarea id="keyDownArea" onkeydown="javascript:updateContent(this)" rows="2" cols="15"></textarea> 74 <textarea id="keyPressArea" onkeypress="javascript:updateContent(this)" rows="2" cols="15"></textarea> 75 <textarea id="keyUpArea" onkeyup="javascript:updateContent(this)" rows="2" cols="15"></textarea> 76 <select id="selector" onchange="javascript:updateContent(this)"> 77 <option value="foo">Foo</option> 78 <option value="bar">Bar</option> 79 </select> 80 <input type="checkbox" id="checkbox" value="checkbox thing" onchange="javascript:updateContent(this)"/> 81 <input id="clickField" type="text" onclick="document.getElementById('clickField').value='Clicked';" value="Hello"/> 82 <input id="doubleClickField" type="text" onclick="document.getElementById('doubleClickField').value='Clicked';" ondblclick="document.getElementById('doubleClickField').value='DoubleClicked';" oncontextmenu="document.getElementById('doubleClickField').value='ContextClicked'; return false;" value="DoubleHello"/> 83 <input id="clearMe" value="Something" onchange="displayMessage('Cleared')"/> 84 <input type="text" id="notDisplayed" style="display: none"> 85 </form> 86 </div> 87 88 <div> 89 <form> 90 <input type="text" id="keyReporter" size="80" 91 onkeyup="appendMessage('up: ' + event.keyCode)" 92 onkeypress="appendMessage('press: ' + event.keyCode)" 93 onkeydown="displayMessage(''); appendMessage('down: ' + event.keyCode)" /> 94 <input name="suppress" onkeydown="if (event.preventDefault) event.preventDefault(); event.returnValue = false; return false;" onkeypress="appendMessage('press');"/> 95 </form> 96 </div> 97 98 </body> 99 </html>