prevent scroll by keydown arrow down...and div focus

補個最近的筆記～
其原由是想替 div加一些hot key 來做事情...

一般的純 div 預設是沒有 focus 的功用～
就算你直接寫 $('#aaa').focus() ，他還是不理你～

重點是要先加個屬性～tabIndex=0
可以參照這裡的說明～蠻詳細的～
https://www.paciellogroup.com/blog/2014/08/using-the-tabindex-attribute/

< 0  為不能被 focus/tab，就沒辦法被focus（就普通div預設並沒有設定）
 >0 設定tab 的順序，文中是不建議使用，是怕亂跳亂掉吧～
=0 大部份的input, button 預設都有～

------------------------------------------------------------------------
另外，想取到目前被 focus 的元件～可以使用傳統 js 取得就好～
document.activeElement
方便又好用～

要另外設定 focus 的 css，要:focus 和:active 雙管其下～比較不會有問題～
（聽說chrome 好像吃  active 不吃 focus，沒特別試就是）
.mycss:focus, .mycss:active {
    border: solid 1px blue;
}

------------------------------------------------------------------------
在一般的行為下，按箭頭的上/下是會捲動整個頁面的scroll bar...
就跟page up/down一樣～

不過有時後～需要在對特定的元件按 上下左右 鍵時～
會連動到畫面的scroll bar～就～一整個很乾尬XD...
所以就變成重點在～ 需要各自有 上下左右 的元件的 keydown listener 下手～
document.xxxxxx.onkeydown =
function(event)  {
       var keycode = event.keyCode;
       ..............
       event.preventDefault();
       return false;
};

總之，重點是在
1. 要使用 onkeydown listener (因為這是第一個觸發的，如果用 keyup就來不及了)
2.  event.preventDefault(); 和 return false; 防止其他瀏覽器接下去的行為～

大概就是降子～