Form
keydown
キーが押されたとき。
document.getElementById('text').addEventListener('keydown', function(e) {
console.log(e.target.value, e.key)
})
keypress
キーが押されたとき。
ただし、shiftやaltなどの装飾キーやIMEなどでは実行されません。
document.getElementById('text').addEventListener('keypress', function(e) {
console.log(e.target.value, e.key)
// テキストボックスがひとつしかないときに、
// Enterでsubmitさせたくないとき。
if (e.key === 'Enter') {
e.preventDefault()
}
})
keyup
キーが離されたとき。
document.getElementById('text').addEventListener('keyup', function(e) {
console.log(e.target.value, e.key)
})
KeyboardEvent
キーボード関連のイベントのインターフェースです。e.keyの一覧はMDNで確認できます。
/*=== よく使うプロパティ ===*/
// 押されたキーを表す文字
console.log(e.key)
// Altキーが押されているか
console.log(e.altKey)
// Ctrlキーが押されているか
console.log(e.ctrlKey )
// Shiftキーが押されているか
console.log(e.shiftKey )
// Metaキー(MacはCommand、Windowsは窓のやつ)が押されているか
console.log(e.metaKey )
input
値が変更されたとき。
テキストボックスの場合、入力されて値が変更されるたびに実行されます。
document.getElementById('text').addEventListener('input', function(e) {
console.log(e.target.value)
})
change
値の変更が確定されたとき。
テキストボックスの場合、入力中には発生せず、値が変更された後にEnterを押された場合や、フォーカスが外れたときに実行されます。
document.getElementById('select').addEventListener('change', function(e) {
console.log(e.target.value)
})
focus
要素がフォーカスされたとき。
document.getElementById('select').addEventListener('focus', function(e) {
console.log(e.target.value)
})
blur
要素からフォーカスが外れたとき。
document.getElementById('select').addEventListener('blur', function(e) {
console.log(e.target.value)
})
FocusEvent
<focus>や<blur>などのフォーカス関連のイベントのインターフェースです。
/*=== よく使うプロパティ ===*/
// focusの場合、そのfocusイベントによってfocusを失った要素への参照
console.log(e.relatedTarget)
submit
フォームがsubmitされたとき。
document.getElementById('form').addEventListener('submit', function(e) {
console.log(e)
// バリデーションのエラーとかでsubmitさせたくないとき
e.preventDefault()
})