LoginSignup
12

More than 5 years have passed since last update.

textarea内でTabキーでインデントできるようにするjs(複数行対応)

Last updated at Posted at 2017-03-07

textareaでタブキーを押したときにインデントが挿入されて欲しい。
テキストエディタみたいに複数行選択してタブ押すと一括インデント、Shift+タブでインデント削除したい。

単にカーソル位置にタブを挿入するコードは出てくるものの、複数行に対応しているものがなかなか見つからなかったので作ってみました。

DEMO→ http://demo.laineus.com/textareaindent/

const TAB_STR = '  '
document.addEventListener('keydown', e => {
  if (e.target.tagName !== 'TEXTAREA' || e.keyCode !== 9) return false
  e.preventDefault()
  const slct = { left: e.target.selectionStart, right: e.target.selectionEnd }
  const lineStart = e.target.value.substr(0, slct.left).split('\n').length - 1
  const lineEnd = e.target.value.substr(0, slct.right).split('\n').length - 1
  const lines = e.target.value.split('\n')
  for (const i in lines) {
    if (i < lineStart || i > lineEnd || lines[i] === '') continue
    if (!e.shiftKey) {
      // 行頭にタブ挿入
      lines[i] = TAB_STR + lines[i]
      slct.left += i == lineStart ? TAB_STR.length : 0
      slct.right += TAB_STR.length
    } else if (lines[i].substr(0, TAB_STR.length) === TAB_STR) {
      // 行頭のタブ削除
      lines[i] = lines[i].substr(TAB_STR.length)
      slct.left -= i == lineStart ? TAB_STR.length : 0
      slct.right -= TAB_STR.length
    }
  }
  e.target.value = lines.join('\n')
  e.target.setSelectionRange(slct.left, slct.right)
  return false
})

そして書いてて気づきましたが、Qiitaの執筆画面でもタブインデント効かないんですね。。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12