web開発をしているとよくお客さんから挙がる要望として、
「backspaceボタンで前の画面に戻るのどうにかしてくれない？」
というものがあります。
考える人 出来たほうが便利なんじゃないか？？
じゃけぇ いやいや、そうとも限らないんだよ。これが。
ただ単に見るだけの画面なら１ページ戻ったところで大した影響はありませんが、業務で使うような伝票入力画面や顧客情報登録画面などだと、間違って１ページ戻るとそれまで入力した情報が全部消えちゃうからです。
テキストボックス内でbackspaceを押しても文字が1文字消えるだけなので、フォーカスインしているつもりでbackspaceを押しちゃって画面遷移してしまう、というわけです。
これもjavascriptで簡単に制御することが出来るのでサンプルコードを紹介します。
サンプルコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<script type="text/javascript"> $(function(){ //キーダウンが起きた時の処理を記述 $(document).keydown(function(event){ var keyCode = event.keyCode; //backspaceボタンの制御 var obj = event.target; if(keyCode == 8){ if((obj.tagName == "input" && obj.type == "text") || obj.tagName == "textarea"){ //入力項目内では使用できるようにする if(!obj.readOnly && !obj.disabled){ return true; } } return false; } //alt + ← ボタンの制御 var altClick = event.altKey; if(altClick && (keyCode == 37 || keyCode == 39)){ return false; } }) }); </script> |
ポイントは、
・backspaceだけでなく、Altキーと、←キーや→キーの組み合わせでも画面遷移するため、それも制御している
・テキストボックス内とテキストエリア内で、readonlyでもdisabledでもない場合に限ってbackspaceを使用可能にしている
ということです。
キーボードには全てキーコードというものが割り振られており、
・backspace ⇒ 8
・← ⇒ 37
・→ ⇒ 39
となっています。
興味があったらその他のキーコードも調べてみてください＾＾
それでは！また！！
最後まで読んで頂きありがとうございます！
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
人気の記事だけ集めたので是非覗いていってください＾＾
厳選！目的別にオススメ記事を紹介-あなたの欲しい情報がここに-
