JavaScriptでショートカットキーを実装する方法 ホームページ制作 | 墨田区

JavaScriptでショートカットキーを実装する方法

LINEで送る
Pocket

JavaScriptでショートカットキーを実装する方法のご紹介です。
JavaScriptでショートカットキーを実装する方法
以前、「主要ブラウザのファンクションキー割り当て」で軽く触れましたが、Webシステム上でファンクションキーを使ったショートカットキーを実装したいという要望がクライアントからありました。

こういった要望は特に目新しいものではないと思いますが、いい感じの Javascript プラグインを見つけたのでご紹介したいと思います。

かなり使いやすいので皆さんもぜひ試してみてください。
デモページはこちら




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


shortcut.jsをダウンロードする

まず、こちらのサイトから shortcut.js をダウンロードします。
Handling Keyboard Shortcuts in JavaScript

画面下の方に行くと、ダウンロードのリンクがあります。
shortcut.jsをダウンロード


shortcut.jsの使い方

shortcut.js には shortcut.add()、shortcut.remove() の2つのメソッドが用意されています。

shortcut.add() には5つの引数(オプション)が用意されています。

オプション説明
typeString‘keydown’,’keyup’,’keypress’ のいずれかで指定できます。デフォルトは ‘keydown’ です。
disable_in_inputBooleaninput 要素の上でショートカットキーを押した場合、動作させるかどうかを指定できます。1つのキーでショートカットを作る場合で、テキストボックスがあるような場合、例えば 1 とか a とかを利用する場合は、true にしておかないと、input 要素で入力ができなくなります。デフォルトは false です。
targetDOM Nodeキーボードのイベントを拾うときの要素を指定できます。使い方はちょっとわかりません。デフォルトは ‘document’ です。
propagateBooleanショートカットキー実行後、ブラウザへイベントを移すかどうかが指定できます。例えば true にして Ctrl+A にショートカットキーを実装した場合、ショートカットキーのイベント+全選択(ブラウザ操作)を同時におこなうことができます。
keycodeIntegerキーコードを数字で指定できます。例えばキーコード A は 65番です。指定したキーで動かない場合に直接数字を指定します。

実装方法はこんな感じです。

shortcut.add("Ctrl+B",function() {
  alert("Hello world !");
},{
  'type':'keydown',
  'propagate':true,
  'target':document
});

shortcut.remove() の引数は1つです。shortcut.add() で指定したショートカットキーを指定します。

shortcut.add("Ctrl+B",function() {
  alert("Bold");
});
//Remove the shortcut
shortcut.remove("Ctrl+B");

デモページ を用意しているので、こちらを参考に実装してみてください。
もちろん 本家サイト でもデモがあります。


まとめ

とても簡単に使えますんで、結構お気に入りです。jQuery の読み込みなしで使えるのも手軽さの一つではないでしょうか。

使う場合は、出来るだけブラウザのショートカットと被らないように実装することをおすすめします。


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Javascript / jQueryの勉強が思うように進まないときは!

Javascript / jQueryの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Javascript / jQueryコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Javascript / jQueryコースあり!現場のプロが直接指導 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL