键盘事件测试

测试键盘事件在不同浏览器下的表现

HTML

<h1>键盘事件测试</h1>

<div class="content">
    <p>文本：</p>
    <p><textarea id="inputArea"></textarea></p>
</div>
<div class="log" id="log"></div>

<pre>
- 中文firefox响应是不同的
- jQuery为ie下添加了which
- 非ie只有firefox在press时没有keyCode
- 一般地，keyCode和which都一样

- 标准顺序：keydonw/keypress/input/keyup
      删除和退格：keydown/input/keyup
- IE6-8 keydown/keypress/propertychange/keyup
        退格和删除只是不触发keypress
- IE9 触发的顺序是：keydown/keypress/input/propertychange/keyup
      退格和删除键不再触发keypress/propertychange
      但在纯ie9环境（不是用ie10模拟）时，退格和删除都只触发keydown/keyup
- IE10触发顺序：keydown/keypress/propertychange/input/keyup
      退格和删除时，只是不再触发keypress
</pre>

<h2>字数限制</h2>

<input type="text" id="limitInput" placeholder="只能输入5个字"/>

CSS

.content{margin-right:30%;}
.log{border:1px solid #ededed;background:#eee;padding:10px 0;}
table{border:1px solid #fff;}
td,th{width:20%;border:1px solid #fff;}

JavaScript

var area = $('#inputArea'),

    log = (function() {
        var table = $('<table/>');
        table.append('<tr><th>type</th><th>keyCode</th><th>which</th><th>charCode</th><th>字符</th><th>功能键</th></tr>');
        table.appendTo('#log');

        return function() {
            var tr = $('<tr/>'),
                i = 0,
                len = arguments.length;

            for (; i < len; i++) {
                tr.append('<td>' + arguments[i] + '</td>');
            }

            tr.appendTo(table);
        }
    })(),
    handler = function(e) {
        e = e || window.event;
        var k = [e.ctrlKey ? 'ctrl' : ''];
        k.push(e.shiftKey ? 'shift' : '');
        k.push(e.altKey ? 'alt' : '');
        k.push(e.metaKey ? 'meta' : '');
        log(e.type, e.keyCode, e.which, e.charCode, String.fromCharCode(e.charCode), k.join(','));
    };

/*
$.each('keydown,keyup,keypress'.split(','), function(i, type) {
    area.bind(type, handler);
});
*/
           area = area.get(0);
           area.onkeydown = area.onkeyup = area.onkeypress = area.oninput = area.onpropertychange = area.onchange = handler;

// 字数限制
$('#limitInput').bind('input', function (evt) {
    var o = $(this), v = o.val();
    console.log(v);
    if (v.length > 5) {
        o.val(v.slice(0, 5));
        evt.preventDefault();
    }
});

/**
 * 控制输入框内到了指定字数不能再输入
 *
    // 输入键盘事件
    Window.prototype._eTextareaKeydown = function (evt) {
        var val, diff,
            // 全部键盘上的可输入键
            isVisibleKey = function (k) {
                return !(evt.altKey || evt.ctrlKey || evt.metaKey) && (
                       k === 32 ||              // 空格
                       (k >= 48 && k <= 57) ||  // 数字
                       (k >= 65 && k <= 90) ||  // 字母
                       (k >= 96 && k <= 105) || // 小键盘数字
                       (k === 106 || (k >= 186 && k <= 192) || k === 222)
                       ); // 其他符号键
            };

        switch (evt.which) {
        // 1....