質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Photoshop

Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

Q&A

解決済

1回答

1955閲覧

JavaScript 単語カード キー入力に対応するには?

may88seiji

総合スコア79

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Photoshop

Photoshopとは、アドビシステムズ(株)が開発した画像編集のソフトウェアです。 イラストレーターや印刷業界などで幅広く使われている他、初心者や一般向けの写真編集用に開発されたソフトもあります。 専用に開発されたフィルターやプラグインを追加すると、機能を拡張することができます。

0グッド

0クリップ

投稿2016/05/30 12:46

###前提・実現したいこと
前提:
JavaScriptを使って単語カードを作成しました。
内容はPhotoShopのショートカットでカードをクリックすると機能名⇄ショートカットキー となるように設定しています。

実現したいこと:
現状でもショートカットキーの学習は可能ですが、カードをクリックするだけでなく、実際にキーを押すことで正誤判定→正解なら次のカード としたいと思っています。

皆様には「表示されたカードと押したキーの正誤判定→正解なら次のカード」の部分をお教えいただけたら幸いです。

###試したこと

javascript

1window.addEventListener('keyup', function(e) { 2 // e.keyCode 3 if (String.fromCharCode(e.keyCode) === .toUpperCase()) { 4 } else { 5 }

こちらで入力されたキーを取得できるところまでは分かったのですが、どのように組み込むのか、活用するのか、というのがわからず詰んでおります。

###該当のソースコード

html

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>PhotoShop</title> 6 <style> 7 body { 8 margin: 0; 9 background: #e0e0e0; 10 text-align: center; 11 font-family: Verdana, sans-serif; 12 color: #fff; 13 } 14 #btn { 15 width: 200px; 16 margin: 0 auto; 17 padding: 7px; 18 border-radius: 5px; 19 background: #00aaff; 20 box-shadow: 0 4px 0 #0088cc; 21 cursor: pointer; 22 } 23 #btn:hover { 24 opacity: 0.8; 25 } 26 #card { 27 margin: 60px auto 20px; 28 width: 400px; 29 height: 100px; 30 cursor: pointer; 31 font-size: 38px; 32 line-height: 100px; 33 perspective: 100px; 34 transform-style: preserve-3d; 35 transition: transform .8s; 36 } 37 #card-front, #card-back { 38 display: block; 39 width: 100%; 40 height: 100%; 41 border-radius: 5px; 42 position: absolute; 43 backface-visibility: hidden; 44 } 45 #card-front { 46 background: #fff; 47 color: #333; 48 } 49 #card-back { 50 background: #fff; 51 color: #333; 52 transform: rotateY(180deg); 53 } 54 .open { 55 transform: rotateY(180deg); 56 } 57 </style> 58</head> 59<body> 60 <div id="card"> 61 <div id="card-front"></div> 62 <div id="card-back"></div> 63 </div> 64 <div id="btn">NEXT</div> 65 <script> 66 (function() { 67 'use strict'; 68 69 var words = [ 70 {'key': '境界線調整', 'a': 'alt ctrl R' }, 71 {'key': '選択反転', 'a': 'shift ctrl I' }, 72 {'key': 'カンバスサイズ', 'a': 'ctrl alt C' }, 73 {'key': '塗りつぶし', 'a': 'shift F5' }, 74 75 ]; 76 77 var card = document.getElementById('card'); 78 var cardFront = document.getElementById('card-front'); 79 var cardBack = document.getElementById('card-back'); 80 var btn = document.getElementById('btn'); 81 card.addEventListener('click', function() { 82 flip(); 83 }); 84 btn.addEventListener('click', function() { 85 next(); 86 }); 87 88 function next() { 89 if (card.className === 'open') { 90 card.addEventListener('transitionend', setCard); 91 flip(); 92 } else { 93 setCard(); 94 } 95 } 96 97 function setCard() { 98 var num = Math.floor(Math.random() * words.length); 99 cardFront.innerHTML = words[num]['key']; 100 cardBack.innerHTML = words[num]['a']; 101 card.removeEventListener('transitionend', setCard); 102 } 103 104 setCard(); 105 106 window.addEventListener('keyup', function(e) { 107 if (e.keyCode === 70) { 108 flip(); 109 } else if (e.keyCode === 78) { 110 next(); 111 } 112 }); 113 114 function flip() { 115 card.className = card.className === '' ? 'open' : ''; 116 } 117 118 })(); 119 </script> 120</body> 121</html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

(複合キーを含めた)ショートカットキーを扱うことは出来ますが、ブラウザのショートカットを抑止できるわけではないと思われます。そのため「PhotoShopのショートカット」を再現することは一部難しいのではと思います。

Shift+Ctrl+w などを実現するには keyup イベントだけではなく色々考えることが有るので、ショートカットに対応したライブラリを使用するほうが手早いです。

【Webページにキーボードのショートカットキーを割り当てられるjsライブラリ「Mousetrap」 | cupOF Interests】
http://co.bsnws.net/article/22

【Demo: mousetrap.js | cupOF Interests】
http://co.bsnws.net/demo-js/mousetrap

【Mousetrap - Keyboard shortcuts in Javascript】
https://craig.is/killing/mice

投稿2016/05/30 14:44

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

may88seiji

2016/05/30 15:02

kei344さま、「Mousetrap」大変参考になりました。 ショートカットの再現はそのままではやはり難しいんですね。。。 「Mousetrap」、色々触ってみようと思います。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問