Key Event

最新推荐文章于 2024-06-11 09:43:37 发布

原创最新推荐文章于 2024-06-11 09:43:37 发布 · 996 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#output #function #events

Script 同时被 2 个专栏收录

7 篇文章

订阅专栏

HTML + CSS

6 篇文章

订阅专栏

本文介绍了一种处理键盘事件的方法，并演示了如何在输入时进行全角到半角字符的自动转换。通过使用JavaScript注册键盘事件，如按键按下、释放和字符输入，实现了对不同浏览器的支持。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Event Key</title>
<script>
  var FCoreTCIT = {Events:{},PageInfo:{IsIE:(navigator.appName=="Microsoft Internet Explorer")}};
  FCoreTCIT.Events.RegisterObjectEvent = function(obj,param){if(FCoreTCIT.PageInfo.IsIE){obj.attachEvent("on"+param[0],param[1]);}else{obj.addEventListener(param[0], param[1], false);}};
  FCoreTCIT.Events.RemoveObjectEvent = function(obj,param){if(FCoreTCIT.PageInfo.IsIE){obj.detachEvent("on"+param[0],param[1]);}else{obj.removeEventListener(param[0], param[1], false);}};
  function parseKeyDown()
  {
    var ev = arguments[0];
    w1.innerHTML = "Event parseKeyDown: " + ev.srcElement.value + "<br/> ";
    for (key in ev)
    {
      w1.innerHTML += (key + ":" + ev[key] + "<br/> ");
    }
  }
  function parseKeyPress()
  {
    var ev = arguments[0];
    w2.innerHTML = "Event parseKeyPress: " + ev.srcElement.value + "<br/> ";
    for (key in ev)
    {
      w2.innerHTML += (key + ":" + ev[key] + "<br/> ");
    }
  }
  function parseKeyUp()
  {
    var ev = arguments[0];
    w3.innerHTML = "Event parseKeyUp: " + ev.srcElement.value + "<br/> ";
    for (key in ev)
    {
      w3.innerHTML += (key + ":" + ev[key] + "<br/> ");
    }
  }
  function test(obj)
  {
    var sl = obj.value.split('');
    for (var i=0; i<sl.length; i++)
    {
/*
      var numList = "０１２３４５６７８９";
      var index = numList.indexOf(sl[i]);
      if (index >=0)
      {
          sl[i] = index;
      }
*/
      var charCode = sl[i].charCodeAt();
      if (charCode >= 0xFF10 && charCode <= 0xFF19)
      {
          sl[i] = charCode & 0xF;
      }
      else if (charCode >= 0xFF41 && charCode <= 0xFF5A)
      {
          sl[i] = String.fromCharCode((charCode & 0xFF) + 0x20);
      }
      else if (charCode >= 0xFF21 && charCode <= 0xFF3A)
      {
          sl[i] = String.fromCharCode((charCode & 0xFF) + 0x20);
      }

    }
    obj.value = sl.join('');
  }
</script>
</head>
<body>
  <input id="testInput" type="text" /><input type="button" value="Click" onclick="test(this.previousSibling);" />
  <div>
  <div style="width:250px; float:left; margin-left:5px; border:solid 1px red;" id="output1"></div>
  <div style="width:250px; float:left; margin-left:5px; border:solid 1px red;" id="output2"></div>
  <div style="width:250px; float:left; margin-left:5px; border:solid 1px red;" id="output3"></div>
  </div>
<script>
  var tag = document.getElementById("testInput");
  var w1 = document.getElementById("output1");
  var w2 = document.getElementById("output2");
  var w3 = document.getElementById("output3");
  FCoreTCIT.Events.RegisterObjectEvent(tag, ["keydown", parseKeyDown]);
  FCoreTCIT.Events.RegisterObjectEvent(tag, ["keyup", parseKeyUp]);
  FCoreTCIT.Events.RegisterObjectEvent(tag, ["keypress", parseKeyPress]);
</script>
</body>
</html>