JavaScript + Ajax 実践サンプル集 - キーボードのイベントプロパティ表示

キーボードのイベントプロパティ表示

説明補足説明コード分割コード関連書籍コメント投稿

このサンプルは、キーボードのイベントハンドラを利用してキーボードの各種プロパティとイベントの発生回数を表示します。Webページにフォーカスを移動したらキーボードからキーを入力してみてください。

このサンプルは、DOM Level 2のAPIを利用してキーボードの各種イベントハンドラを登録しています。

universal.dom.addEventListener(
  document, 'keydown', dispKeyValue);   
universal.dom.addEventListener(
  document, 'keydown', dispEventCounter);   
universal.dom.addEventListener(
  document, 'keypress', dispKeyValue);   
universal.dom.addEventListener(
  document, 'keypress', dispEventCounter);   
universal.dom.addEventListener(
  document, 'keyup', dispKeyValue);   
universal.dom.addEventListener(
  document, 'keyup', dispEventCounter);

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>KeyboardEvents</title>
<style type="text/css">
body {
  font-family: "ＭＳ Ｐゴシック", Osaka;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
h2 {
  font-size: 14px;
  clear: both;
}
#box {
  border: 1px solid #000000;
  background-color: #dddddd;
  cursor: pointer;
  padding: 10px 3px 10px 3px;
  width: 300px;
}
.tbl {
  width: 300px;
  margin-bottom: 20px;
  padding: 0px;
  background-color: #ffffee;
  border-top: 2px solid #5c5c5c;
  border-bottom: 2px solid #5c5c5c;
}
.tbl .row {
  clear: both;
  width: 300px;
  margin: 0px;
  padding: 0px;
}
.tbl .hcol {
  float: left;
  width: 100px;
  height: 16px;
  border-bottom: 1px solid #8c8c8c;
  margin: 0px;
}
.tbl .col {
  float: left;
  width: 200px;
  height: 16px;
  border-bottom: 1px solid #8c8c8c;
  margin: 0px;
}
.tbl .bottomcell {
  border-bottom: none;
}
.tbl .bottomrow {
  height: 0px;
}
#keybox {
  border: 1px solid #000000;
  background-color: #dddddd;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  width: 200px;
}
#childdesc {
  width: 160px;
}
</style>
<script type="text/javascript" src="js/universaldom.js"></script>
<script type="text/javascript">
var eventcounter = new Object();

universal.dom.addEventListener(window, 'load', initDocument);

function initDocument() {
  tbox = document.getElementById('tbox');
  
  universal.dom.addEventListener(document, 'keydown', dispKeyValue);
  universal.dom.addEventListener(document, 'keydown', dispEventCounter);
  eventcounter.keydown = 0;

universal.dom.addEventListener(document, 'keypress', dispKeyValue);
  universal.dom.addEventListener(document, 'keypress', dispEventCounter);
  eventcounter.keypress = 0;

universal.dom.addEventListener(document, 'keyup', dispKeyValue);
  universal.dom.addEventListener(document, 'keyup', dispEventCounter);
  eventcounter.keyup = 0;
}

function dispKeyValue(evt) {

document.getElementById('type').firstChild.nodeValue = evt.type;

document.getElementById('altKey').firstChild.nodeValue = evt.altKey;
 
  document.getElementById('ctrlKey').firstChild.nodeValue = evt.ctrlKey;

document.getElementById('keyIdentifier').firstChild.nodeValue = evt.keyIdentifier;

document.getElementById('keyLocation').firstChild.nodeValue = evt.keyLocation;
  
  document.getElementById('metaKey').firstChild.nodeValue = evt.metaKey;

document.getElementById('shiftKey').firstChild.nodeValue = evt.shiftKey;

document.getElementById('keyCode').firstChild.nodeValue = evt.keyCode;

universal.dom.preventDefault(evt);

universal.dom.stopPropagation(evt);
}

function dispEventCounter(evt) {

eventcounter[evt.type] ++;
  document.getElementById(evt.type).firstChild.nodeValue = eventcounter[evt.type];

universal.dom.preventDefault(evt);

universal.dom.stopPropagation(evt);
}
</script>
</head>

<body>
<div class="tbl">
  <div class="row">
    <div class="hcol">type</div>
    <div class="col">： <span id="type">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">altKey</div>
    <div class="col">： <span id="altKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">ctrlKey</div>
    <div class="col">： <span id="ctrlKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">keyIdentifier</div>
    <div class="col">： <span id="keyIdentifier">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">keyLocation</div>
    <div class="col">： <span id="keyLocation">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">metaKey</div>
    <div class="col">： <span id="metaKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">shiftKey</div>
    <div class="col">： <span id="shiftKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol bottomcell">keyCode</div>
    <div class="col bottomcell">： <span id="keyCode">N/A</span></div>
  </div>
</div>
<div class="tbl">
  <div class="row">
    <div class="hcol">keydown</div>
    <div class="col">： <span id="keydown">0</span> 回</div>
  </div>
  <div class="row">
    <div class="hcol">keypress</div>
    <div class="col">： <span id="keypress">0</span> 回</div>
  </div>
  <div class="row">
    <div class="hcol bottomcell">keyup</div>
    <div class="col bottomcell">： <span id="keyup">0</span> 回</div>
  </div>
</div>

</body>

</html>

外部スクリプトCSS部HEAD部BODY部

ボックス内のコードを外部ファイル(*.js)、またはHTMLドキュメントの<HEAD>セクションの<script>タグ内にコピー＆ペーストしてください。

            
/**********************************************************************
* universaldom.js - universal dom (標準DOMスクリプティングから流用）
***********************************************************************/

var universal;

if (typeof universal == "undefined") {
  universal = {}; // universe = new Object();
}
else if (typeof universal != "object") {
  throw new Error("universal already exists and is not an object");  
}  

if (!universal.dom) {
  universal.dom = {}; // universe.dom = new Object();
}  
else if (typeof universal.dom != "object") {
  throw new Error("universal.dom already exists and is not an object");  
}    

universal.dom.addEventListener = function(elem, type, func, useCapture) {
  if(!elem) {
    return false;
  }  
  if(! useCapture) {
    useCapture = false;  
  }  
  if(elem.addEventListener) {
    elem.addEventListener(type, func, false);
  } else if(elem.attachEvent) {
    elem.attachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};

universal.dom.removeEventListener = function(elem, type, func, useCapture) {
  if(!elem) {
    return false;
  }  
  if(!useCapture) {
    useCapture = false;
  }  
  if(elem.removeEventListener) {
    elem.removeEventListener(type, func, false);
  } else if(elem.detachEvent) {
    elem.detachEvent('on'+type, func);
  } else {
    return false;
  }
  return true;
};

universal.dom.target = function(evnt) {
  if(evnt && evnt.target) {
    if(evnt.target.nodeType == 3) {
      return evnt.target.parentNode;
    } else {
      return evnt.target;
    }
  } else if(window.event && window.event.srcElement) {
    return window.event.srcElement;
  } else {
    return null;
  }
};

universal.dom.preventDefault = function(evnt) {
  if(evnt && evnt.preventDefault) {
    evnt.preventDefault();
    evnt.currentTarget['on'+evnt.type] = function() {return false;};
  } else if(window.event) {
    window.event.returnValue = false;
  }
};

universal.dom.stopPropagation = function(evnt) {
  if(evnt && evnt.stopPropagation) {
    evnt.stopPropagation();
  } else if(window.event) {
    window.event.cancelBubble = true;
  }
};

universal.dom.dispatchEvent = function(elem, evnttype) {
  if(elem.dispatchEvent) {
    var evnt = document.createEvent('MouseEvents');
    evnt.initEvent(evnttype, true, true);
    elem.dispatchEvent(evnt);
  } else if(window.event) {
    var evnt = document.createEventObject();
    evnt.button = 1;
    elem.fireEvent('on'+evnttype, evnt);
  }
}

ボックス内のスタイルシート(CSS)を外部ファイル(*.css)、またはHTMLドキュメントの<HEAD>セクションの<style>タグ内にコピー＆ペーストしてください。

            
body {
  font-family: "ＭＳ Ｐゴシック", Osaka;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}
h2 {
  font-size: 14px;
  clear: both;
}
#box {
  border: 1px solid #000000;
  background-color: #dddddd;
  cursor: pointer;
  padding: 10px 3px 10px 3px;
  width: 300px;
}
.tbl {
  width: 300px;
  margin-bottom: 20px;
  padding: 0px;
  background-color: #ffffee;
  border-top: 2px solid #5c5c5c;
  border-bottom: 2px solid #5c5c5c;
}
.tbl .row {
  clear: both;
  width: 300px;
  margin: 0px;
  padding: 0px;
}
.tbl .hcol {
  float: left;
  width: 100px;
  height: 16px;
  border-bottom: 1px solid #8c8c8c;
  margin: 0px;
}
.tbl .col {
  float: left;
  width: 200px;
  height: 16px;
  border-bottom: 1px solid #8c8c8c;
  margin: 0px;
}
.tbl .bottomcell {
  border-bottom: none;
}
.tbl .bottomrow {
  height: 0px;
}
#keybox {
  border: 1px solid #000000;
  background-color: #dddddd;
  font-weight: bold;
  text-align: center;
  cursor: pointer;
  padding: 5px;
  font-size: 14px;
  font-weight: bold;
  width: 200px;
}
#childdesc {
  width: 160px;
}

ボックス内のコードをHTMLドキュメントの<HEAD>セクションにコピー＆ペーストしてください。

            
<script type="text/javascript" src="js/universaldom.js"></script>
<script type="text/javascript">
var eventcounter = new Object();

universal.dom.addEventListener(window, 'load', initDocument);

function initDocument() {
  tbox = document.getElementById('tbox');
  
  universal.dom.addEventListener(document, 'keydown', dispKeyValue);
  universal.dom.addEventListener(document, 'keydown', dispEventCounter);
  eventcounter.keydown = 0;

  universal.dom.addEventListener(document, 'keypress', dispKeyValue);
  universal.dom.addEventListener(document, 'keypress', dispEventCounter);
  eventcounter.keypress = 0;

  universal.dom.addEventListener(document, 'keyup', dispKeyValue);
  universal.dom.addEventListener(document, 'keyup', dispEventCounter);
  eventcounter.keyup = 0;
}

function dispKeyValue(evt) {

  document.getElementById('type').firstChild.nodeValue = evt.type;

  document.getElementById('altKey').firstChild.nodeValue = evt.altKey;
 
  document.getElementById('ctrlKey').firstChild.nodeValue = evt.ctrlKey;

  document.getElementById('keyIdentifier').firstChild.nodeValue = evt.keyIdentifier;

  document.getElementById('keyLocation').firstChild.nodeValue = evt.keyLocation;
  
  document.getElementById('metaKey').firstChild.nodeValue = evt.metaKey;

  document.getElementById('shiftKey').firstChild.nodeValue = evt.shiftKey;

  document.getElementById('keyCode').firstChild.nodeValue = evt.keyCode;

  universal.dom.preventDefault(evt);

  universal.dom.stopPropagation(evt);
}

function dispEventCounter(evt) {

  eventcounter[evt.type] ++;
  document.getElementById(evt.type).firstChild.nodeValue = eventcounter[evt.type];

  universal.dom.preventDefault(evt);

  universal.dom.stopPropagation(evt);
}
</script>

ボックス内のコードをHTMLドキュメントの<BODY>セクションにコピー＆ペーストしてください。

            
<div class="tbl">
  <div class="row">
    <div class="hcol">type</div>
    <div class="col">： <span id="type">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">altKey</div>
    <div class="col">： <span id="altKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">ctrlKey</div>
    <div class="col">： <span id="ctrlKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">keyIdentifier</div>
    <div class="col">： <span id="keyIdentifier">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">keyLocation</div>
    <div class="col">： <span id="keyLocation">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">metaKey</div>
    <div class="col">： <span id="metaKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol">shiftKey</div>
    <div class="col">： <span id="shiftKey">N/A</span></div>
  </div>
  <div class="row">
    <div class="hcol bottomcell">keyCode</div>
    <div class="col bottomcell">： <span id="keyCode">N/A</span></div>
  </div>
</div>
<div class="tbl">
  <div class="row">
    <div class="hcol">keydown</div>
    <div class="col">： <span id="keydown">0</span> 回</div>
  </div>
  <div class="row">
    <div class="hcol">keypress</div>
    <div class="col">： <span id="keypress">0</span> 回</div>
  </div>
  <div class="row">
    <div class="hcol bottomcell">keyup</div>
    <div class="col bottomcell">： <span id="keyup">0</span> 回</div>
  </div>
</div>