Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
JavaScript のKeyboardEvent の発火のテスト
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Keyboard Event Test</title>
<link rel="stylesheet" href="http://fonts.googleapis.com/earlyaccess/notosansjapanese.css">
<style>
html, body {
font-family: 'Noto Sans Japanese', sans-serif;
}
#click-space {
width: 20rem;
height: 10rem;
border: .1rem solid #333;
border-radius: .3rem;
}
p {
margin: .5rem 0;
}
</style>
</head>
<body>
<header>
<h1>Click Test</h1>
</header>
<main>
<input type="text" id="input-text">
<button id="btn-reset">reset</button>
<div id="msg">
</div>
</main>
<script>
window.onload = function(){
var input = document.getElementById('input-text');
var msg = document.getElementById('msg');
// MouseEvent
(function() {
input.addEventListener('keydown', keyDown);
function keyDown(event) {
msg.appendChild(createP('keydown'));
console.log('keydown');
console.log(event);
}
input.addEventListener('keyup', keyUp);
function keyUp(event) {
msg.appendChild(createP('keyup'));
console.log('keyup');
console.log(event);
}
input.addEventListener('keypress', keypress);
function keypress(event) {
msg.appendChild(createP('keypress'));
console.log('keypress');
console.log(event);
}
function createP(inner){
var p = document.createElement('p');
p.innerHTML = inner;
return p;
}
})();
// Reset
(function() {
var btn = document.getElementById('btn-reset');
btn.addEventListener('click', function(event){
input.value = '';
removeEverything(msg);
});
function removeEverything(element) {
while (element.firstChild) {
element.firstChild.remove();
}
}
})();
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.