テキストエリアでのキーボード入力をとらえ、デフォルト動作を抑制する
テキストエリアでファンクションキーやタブキーの動作をカスタマイズするために、まずキーコードを取得し、F1のヘルプ表示などのデフォルトの動作を抑制するコードを書きました。
IEでF1キーのヘルプ表示を抑制するには window.onhelp で false を返すようにする必要があります。
IEとOperaはAltキーでメニューバーにフォーカスが行くのを防ぐ方法は見つかっていません。
IE8.0.6001.18865, Chrome4.0.249.78, Firefox3.6, Opera10.10, Safari4.0.4で動作することを確認しました。
で動作を確認できます。
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>キーコードを取得する</title> <script type="text/javascript"> window.onload = function() { decorate(document.getElementById('input'), document.getElementById('info')).focus() } /* 指定したelementのキー入力を取得するようにする */ function decorate(element, info) { window.onhelp = function() { return false } /* IEのヘルプ抑止 */ element.onkeydown = function(e) { e = e || event var key = (e.keyCode || e.which) info.innerHTML = 'keydown = ' + keyToString(e, key) if(repress(e, key))return false } element.onkeypress = function(e) { e = e || event var key = (e.keyCode || e.which) info.innerHTML += 'keypress = ' + keyToString(e, key) if(repress(e, key, true))return false } element.onkeyup = function(e) { e = e || event var key = (e.keyCode || e.which) info.innerHTML += 'keyup = ' + keyToString(e, key) if(repress(e, key))return false } return element /* デフォルトの動作を抑制する */ function repress(e, key, press) { if(key == 9 || e.ctrlKey || e.altKey || (!press && 112 <= key && key <= 123)) { if(e.preventDefault != undefined)e.preventDefault() if(e.stopPropagation != undefined)e.stopPropagation() if(event != undefined && event.returnValue != undefined)event.returnValue = false if(event != undefined && event.cancelBubble != undefined)event.cancelBubble = true if(e.keyCode != undefined)try{ e.keyCode = 0 }catch(_){ } if(e.which != undefined)try{ e.which = 0 }catch(_){ } return true } return false } /* キー情報を文字列化 */ function keyToString(e, key) { return (e.shiftKey ? '[Shift] + ' : '') + (e.ctrlKey ? '[Ctrl] + ' : '') + (e.altKey ? '[Alt] + ' : '') + String.fromCharCode(key) + '(' + key +')' + '<br/>' } } </script> <form> <textarea id="input" cols="80" rows="10"></textarea><br/> <span id="info" style="background-color:#ffffcc"></span> </form>