パソコンを使って仕事をしている人、ファイルを書き終わった後で、
"コマンド(mac) or Ctrl(win) + sキー"を素早く押してしまうクセ持ってませんか？
プログラマーの人は、きっとこのクセがついていると思うし、
Adobeを使っているデザイナーなども、このクセつけているんじゃないでしょうか？
そして、パソコン歴が長いほどこの、保存ショートカットである、Command+Sを押してしまうと思います。
だって、作業したらすぐに保存して、その後間違って消しちゃったり、パソコンがフリーズしちゃったり、誰かにイタズラされてしまうのを防止するために、コレやっちゃいますよね？
でも、最近、インターネットブラウザでブログを書いたり、Canvaをブラウザで作業したり、いろいろなテキストをブラウザ上やアプリで作業することも増えてきて、
その時に、Command+Sを押しちゃうと、インターネットブラウザで今開いているページのHTMLをダウンロードするショートカットになって、
ダイアログが表示して、htmlファイルをセーブしようとしてしまいます。
会社のERPなどのシステムなどで、このショートカットトラップに引っかかった人もたくさんいると思いますが、
そういうシステムを作っている側からすると、Command+Sは、ブラウザ上で動作をしないように（そのページ限定ですが）する必要があると思い、
今回は、どのページでもすぐに使えるコードを書いておいて、後々に自分でコピペして使おう作戦に取り組みたいと思います。
ソースコード
sample.html
<h1>COMMAND + Sの保存防止</h1>
<label><input type="checkbox" name="save_protect" checked>Saveキー防止</label>
<script>
window.addEventListener("keydown",(e => {
const check_element = document.querySelector(`[name="save_protect"]`)
if(check_element && !check_element.checked){return}
console.log(e.keyCode,e.metaKey)
// 83 : sキー
if(e.metaKey && e.keyCode === 83){
console.log("saveブロック!")
e.preventDefault()
}
}))
</script>
デモ
したのSaveキー防止のチェックボックスがONの時に、Command(max),Control(win) + s キーを同時押しした際に、ページの保存ダイアログが表示されるのを防ぎます。
（チェックされていない場合は、保存ダイアログが表示されます）
解説
ページ内のkeydownイベントに対して、
"e.metaKey"は、Macでは"Command"ボタン、Windowsでは"Control"ボタンが押されている場合は、trueが取得できます。
これに、keyCodeの83番が、"s"キーなので、
同時に押されている場合に、event.preventDefault()を実行すると、その押下イベントをストップさせることができます。
汎用のために
一番よく使っている、GoogleBloggerのページ（または該当するドメインやURL）で、発動するブラウザ拡張機能を作っておくというのもアリですね。
イベント処理のところだけをコピペすれば、どのホームページでも使えるので、かなり手軽に使えると思います。
あとがき
昔からの手癖で、コマンド＋Sをついつい押してしまって、いらんダイアログが出て本当にうんざりしていました。
大した処理じゃないけど、自分のために作っておくコードは、本当に大事です。
そして、それを使っていくうちに、改良したり機能追加したりして、まあまあなシステムが出来上がることもあります。
要するに、作るというアウトプットが重要なのかもですね。
これって、エンジニア思考なのか、クリエイティブ思考なのか、どっちかわかりませんが、とにかくアウトプットは重要ということが良くわかりました。
0 件のコメント:
コメントを投稿