jQuery监听键盘输入插件

演示  website 下载

插件介绍

jQuery监测JavaScript keydown事件，并在按下时显示键盘键的Unicode和名称。

使用方法

1. 创建html代码。

<div class="input">
  <input type="text" class="text">
  <span class="result"></span>
</div>

<div class="options">
  <div class="key-code">
    <h2>Key UniCode</h2>
    <span class="code" data-copy="copy-code"></span>
  </div>
  <div class="key-name">
    <h2>Key Name</h2>
    <span class="name" data-copy="copy-name"></span>
  </div>
  <input class="copy"></input>
</div>

<span class="copy-code">复制 !!</span>
<span class="copy-name">复制 !!</span>

2. 在页面中加载jQuery库。

<script src="jquery.min.js"></script>

3. 监听输入主要脚本（jQuery脚本）。

$(function() {
  $("input.text").focus();
  $("input.text").on("keydown", function(e) {
    var keyUniCode = e.keyCode || e.which,
        keyText = e.key || e.code;

    $(this).val($(this).val().slice(0, 1));
    $(".input .result").html(keyUniCode);
    $(".options .key-code .code").html(keyUniCode);
    $(".options .key-name .name").html(keyText);

    //Special Cases for some Keys
    if ($(".options .key-code .code").html() == "32") {
      $(".options .key-name .name").html("Space");
    }

    if (keyUniCode == 18 || keyUniCode == 122 || keyUniCode == 120 || keyUniCode == 117 || keyUniCode == 116 || keyUniCode == 114 || keyUniCode == 112 || keyUniCode == 123 || keyUniCode == 121 || keyUniCode == 9) {
      e.preventDefault();
    }

  });

  $("body, html").on("click", function() {
    $("input.text").focus();
  });

  $(".options .code, .options .name").on("click", function() {
    var text = $(this).text();
    copySpan = $("." + $(this).data("copy"));

    $("input.copy").val(text).select();
    document.execCommand("Copy");

    copySpan.animate({
      left: 0
    }, 600, function() {
      copySpan.delay(800).animate({
        left: "-100%"
      }, 600);
    });

  });
})