| OLD | NEW |
|---|
| (Empty) | |
| 1 <!doctype html> |
| 2 <meta charset=utf-8> |
| 3 <head> |
| 4 <title>Test Keys</title> |
| 5 <script> |
| 6 var allEvents = {events: []}; |
| 7 function displayMessage(message) { |
| 8 document.getElementById("events").innerHTML = "<p>" + message + "</p
>"; |
| 9 } |
| 10 |
| 11 function appendMessage(message) { |
| 12 document.getElementById("events").innerHTML += "<p>" + message + "</
p>"; |
| 13 } |
| 14 |
| 15 /** |
| 16 * Escape |key| if it's in a surrogate-half character range. |
| 17 * |
| 18 * Example: given "\ud83d" return "U+d83d". |
| 19 * |
| 20 * Otherwise JSON.stringify will convert it to U+FFFD (REPLACEMENT CHARA
CTER) |
| 21 * when returning a value from executeScript, for example. |
| 22 */ |
| 23 function escapeSurrogateHalf(key) { |
| 24 if (typeof key !== "undefined" && key.length === 1) { |
| 25 var charCode = key.charCodeAt(0); |
| 26 var highSurrogate = charCode >= 0xD800 && charCode <= 0xDBFF; |
| 27 var surrogate = highSurrogate || (charCode >= 0xDC00 && charCode <=
0xDFFF); |
| 28 if (surrogate) { |
| 29 key = "U+" + charCode.toString(16); |
| 30 } |
| 31 } |
| 32 return key; |
| 33 } |
| 34 |
| 35 function recordEvent(event) { |
| 36 var key = escapeSurrogateHalf(event.key); |
| 37 allEvents.events.push({ |
| 38 "code": event.code, |
| 39 "key": key, |
| 40 "which": event.which, |
| 41 "location": event.location, |
| 42 "ctrl": event.ctrlKey, |
| 43 "meta": event.metaKey, |
| 44 "shift": event.shiftKey, |
| 45 "repeat": event.repeat, |
| 46 "type": event.type |
| 47 }); |
| 48 appendMessage(`${event.type}(code:${event.code}, key:${key}, which:${e
vent.which})`); |
| 49 } |
| 50 |
| 51 function resetEvents() { |
| 52 allEvents.events.length = 0; |
| 53 displayMessage(""); |
| 54 } |
| 55 </script> |
| 56 </head> |
| 57 <body> |
| 58 <div> |
| 59 <h2>KeyReporter</h2> |
| 60 <input type="text" id="keys" size="80" |
| 61 onkeyup="recordEvent(event)" |
| 62 onkeypress="recordEvent(event)" |
| 63 onkeydown="recordEvent(event)"> |
| 64 </div> |
| 65 <div id="resultContainer" style="width:300;height:60"> |
| 66 <h2>Events</h2> |
| 67 <div id="events"></div> |
| 68 </div> |
| 69 </body> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2665073003:
Import wpt@cd5cce9780f84cee679919679b8199084ea96d54 (Closed)
