doevisualizations
Version:
Data Visualization Library based on RequireJS and D3.js (v4+)
148 lines (136 loc) • 4.59 kB
HTML
<html lang="en">
<head>
<title>jQuery Event Key</title>
<style type='text/css'>
body {font-family: verdana}
table {
border-collapse: collapse;
}
td, th {
border: 1px solid #ACACAC;
padding: 5px;
}
</style>
</head>
<body>
<h1>jQuery.event.key keymap customizer</h1>
<p><label for='key'>Type in input:</label><input id='key' /></p>
<table>
<thead>
<tr>
<th>Event type</th>
<th>keyName()</th>
<th>keyCode</th>
<th>charCode</th>
<th>which</th>
<th>keyIdentifier</th>
</tr>
</thead>
<tbody>
<tr id="keydown">
<td>keydown</td>
<td class="keyName"></td>
<td class="keyCode"></td>
<td class="charCode"></td>
<td class="which"></td>
<td class="keyIdentifier"></td>
</tr>
<tr id="keypress">
<td>keypress</td>
<td class="keyName"></td>
<td class="keyCode"></td>
<td class="charCode"></td>
<td class="which"></td>
<td class="keyIdentifier"></td>
</tr>
<tr id="keyup">
<td>keyup</td>
<td class="keyName"></td>
<td class="keyCode"></td>
<td class="charCode"></td>
<td class="which"></td>
<td class="keyIdentifier"></td>
</tr>
</tbody>
</table>
<p id="lastKeyPress">Last character registered on keypress <span></span></p>
<p>Provide this customized key mapping with your application:</p>
<pre id="code"></pre>
<script type='text/javascript'
src='../../../steal/steal.js'>
</script>
<script id="demo-source" type='text/javascript'>
steal('jquerypp/event/key',function(){
// converts a single character into a unicode character
var readable = {
"\r" : "\\r",
"\b" : "\\b",
"\t" : "\\t"
}, columns = ['keyCode', 'charCode', 'which', 'keyIdentifier'],
list = $('#mapping tbody'),
originalMap = $.event.key(),
lastKeyPress = null,
updatedMap = {},
update = function(name, which) {
var code = [];
if(name && which) {
updatedMap[name] = which;
$.event.key(updatedMap);
$.each(updatedMap, function(name, current) {
if(current !== undefined) {
code.push('\n "' + toUnicode(name) + '" : ' + current);
}
});
}
$('#code').text('$.event.key("' + jQuery.uaMatch(navigator.userAgent).browser +
'", {' + code.join(',') + '\n});');
},
setKeyPress = function(val) {
lastKeyPress = (val && val.toLowerCase()) || null;
$('#lastKeyPress span').html(val || '');
},
toUnicode = function(name) {
if(name.length > 1) {
return name;
}
var result = '\\u',
hex = name.charCodeAt(0).toString(16),
fill = 4 - hex.length;
for(var i = 0; i < fill; i++) {
result += '0';
}
return result + hex;
};
$('#key').on('keydown keypress keyup', function(ev){
var context = $('#' + ev.type), keyName = ev.keyName();
$.each(columns, function(i, name) {
context.find('.' + name).html(ev.originalEvent[name]);
});
context.find('.keyName').html(readable[keyName] || keyName);
});
$('#key').on('keydown', function(ev) {
setKeyPress();
});
$('#key').on('keypress', function(ev) {
setKeyPress(ev.keyName());
});
$('#key').on('keyup', function(ev) {
if(ev.which > 48 && !ev.shiftKey && !ev.altKey && !ev.ctrlKey) {
// If different than the last keypress
if(lastKeyPress !== null && ev.keyName() != lastKeyPress) {
update(lastKeyPress, ev.which);
}
// If it is not in the keymap
if(!ev.keyName()) {
update(lastKeyPress, ev.which);
}
setKeyPress();
}
});
update();
});
</script>
</body>
</html>