テキストエリアでキーの同時押しを判定する方法
テキストエリアでキーを同時押し際に何を同時押しされたかの判定を行う方法。
前回の記事「テキストエリアでタブを入力できるようにする」と似た方法となります。
サンプル&コード
簡単解説
下記のハイライトになっている箇所がキーとなります。以下がonkeydownイベントでCtrlキー,Altキー,Shiftキーが押させれている時にtrueとなります。
値 | キー |
---|---|
e.ctrlkey | Ctrlキー |
e.metaKey | Windows:Ctrlキー Mac:Command |
e.altKey | Altキー |
e.shiftKey | Shiftキー |
jQuery(function($){ $("textarea") // フォーカス時の設定 .focus(function(){ window.document.onkeydown = function(e){ // e.which = 83 = s if ((e.ctrlKey || e.metaKey) && e.which == 83) { // e.ctrlkey = Ctrl // e.metaKey = Mac: Command or Windows: Ctrl $("#log_content").after("<p>Ctrl + S</p>") e.preventDefault(); }else if (e.altKey && e.which == 83) { // e.altkey = Alt $("#log_content").after("<p>Alt + S</p>") e.preventDefault(); }else if (e.shiftKey && e.which == 83) { // e.shiftKey = Shift $("#log_content").after("<p>Shift + S</p>") e.preventDefault(); } } }) // フォーカスが外れた時の設定 .blur(function(){ // 通常の動作を行うように再設定 window.document.onkeydown = function(e){ return true; } }); });
«前の記事:テキストエリアでタブを入力できるようにする動画や効果音などの豊富な素材が無料で使える「NHKクリエイティブ・ライブラリー」:次の記事»