ブラウザ毎にキーコードが違っていたので対応方法を考えてみた(2015/11/23時点)

そんなバナナリパブリック(意味不明)





環境 Firefox, Chromeのみ
一応対応を入れれば他のブラウザでも可能なはずです。(面倒なのでやらなかった)

ChromeとFirefoxで異なるキーコード一覧

ざっと確認したところ異なっているのは以下の6キーのみのようです
なんでこれだけ......
  • ; (セミコロン) chrome:187 firefox:59
  • : (コロン) chrome186: firefox:58
  • - (マイナス) chrome:189 firefox:173
  • ^ (キャレット) chrome:222 firefox:160
  • \ (バックスラッシュ) chrome:226 firefox:220
  • @ (アットマーク chrome:192 firefox:54

でこんな感じで対応入れてみました。

See the Pen ojRXpP by ninomae-makoto (@ninomae-makoto) on CodePen.



ソースコード解説

3~28行の
function getBrowser() { .....
はユーザーエージェントからブラウザを判断しています。
元ネタはここ
完璧とは言い難いですが正直ゴチャついてて処理しきれそうにありません。
とりあえずメジャーなものだけ判定しています。

29~136行 var Const;... が定数定義になります。
116~135行 でブラウザごとに定義を置き換えます。
現状Chromeとそれ以外という適当すぎる分け方になっていますが(ごめんちゃい)改造は容易だと思います。

145~168行 の var result2 = document.getElementById("result2");... が実際に使用しているところです。
ChromeでもFirefoxでも正しく処理が分岐すると思います。

firefoxは円マークとバックスラッシュを区別してくれません。
Chromeは区別はしているようですが表示上は変わりません。(Windowsだとそうなるんでしたっけ?)

はっきりいって挙動が変わる可能性があります。(タイトルに日付を入れたのはこのため)


こんな感じで頑張ってくだしあ

2015年11月23日月曜日