[JS]如何使用純 Javascript 支援在 textarea 和 input 使用 Tab

7 / 2, 2015 JS

之前在寫一個小 Project ,就是單純臨時想要找個 Web-based 筆記本,但是都沒看到滿意的,於是就發揮 Programmer 精神來自幹一個,但是卻遇到一個問題: textarea 裡面如果按下 Tab 會執行預設動作,也就是 focus 或 unfocus ,但是我只是想要讓他空四格啊 QAQ ,所以這時就上網找了一點方法來 handle 這種狀況


喔對這個專案為了減少大小,所以我決定完全不用 jQuery ,因為 You Might Not Need jQuery

首先,我們要先知道 Tab (為了方便,暫時用 4 個空格取代)是在現在的位置插入 4 個空格,所以首先我們要先找出如何讓 JS 定位現在的游標位置並插入指令字串
很高興 Stackoverflow 上已經有人貼出類似的 Code ,所以不用再花時間自幹了

有個這個核心 Code ,剩下就簡單啦,只要掛上一個 event listener 監聽鍵盤,遇到 Tab 時就插入空格, Tab 的 KeyCode 是 9 ,所以用如下 Code 即可

現在在 id=’textarea’ 的欄位按下 Tab ,應該會自己空四格了