JavaScriptはtextarea_javascriptスキルにタブキーのインデント処理メソッドを実装します

この記事の例では、JavaScriptを使用してテキストエリアのタブキーのインデント処理を実装する方法を説明します。皆さんの参考に共有してください。詳細は以下の通りです。

関連する解決策をインターネットで検索しました。他の人は 2 ～ 3 行の JavaScript を使用して問題を解決していましたが、どれもいくつかの小さな問題を抱えていました。 JQuery を使用するものもありますが、これも非常に簡単です。

この記事のJavaScriptコードはTEXTAREAにTABキーを入力して自動インデントする機能を実装しています。ただし、このコードは
では正常に実行できません。

コードをコピーします コードは次のとおりです:

sel =event.srcElement.document.selection.createRange()

この文ではエラーが発生します:
例外 TypeError をキャッチしました: 未定義 のプロパティ '選択' を読み取れません

コードは次のように IE で通常どおり実行されます。

<mce:script type="text/javascript">
<!-- 
function editTab() 
{ 
  var code, sel, tmp, r 
  var tabs="" 
  event.returnValue = false 
  sel =event.srcElement.document.selection.createRange() 
  r = event.srcElement.createTextRange() 
  switch (event.keyCode) 
  { 
    case (8)  : 
      if (!(sel.getClientRects().length > 1)) 
      { 
        event.returnValue = true 
        return 
      } 
      code = sel.text 
      tmp = sel.duplicate() 
      tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
      sel.setEndPoint("startToStart", tmp) 
      sel.text = sel.text.replace(/^/t/gm, "") 
      code = code.replace(/^/t/gm, "").replace(//r/n/g, "/r") 
      r.findText(code) 
      r.select() 
      break 
    case (9)  : 
      if (sel.getClientRects().length > 1) 
      { 
        code = sel.text 
        tmp = sel.duplicate() 
        tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
        sel.setEndPoint("startToStart", tmp) 
        sel.text = "/t"+sel.text.replace(//r/n/g, "/r/t") 
        code = code.replace(//r/n/g, "/r/t") 
        r.findText(code) 
        r.select() 
      } 
      else 
      { 
        sel.text = "/t" 
        sel.select() 
      } 
      break 
    case (13)  : 
      tmp = sel.duplicate() 
      tmp.moveToPoint(r.getBoundingClientRect().left, sel.getClientRects()[0].top) 
      tmp.setEndPoint("endToEnd", sel) 
      for (var i=0; tmp.text.match(/^[/t]+/g) && i<tmp.text.match(/^[/t]+/g)[0].length; i++)  tabs += "/t" 
      sel.text = "/r/n"+tabs 
      sel.select() 
      break 
    default   : 
      event.returnValue = true 
      break 
  } 
} 
// -->
</mce:script>

使用時:

コードをコピー コードは次のとおりです:

<textareacols=80 rows=20 name="input" onkeydown ="editTab ()"></textarea>

この記事が皆様の JavaScript プログラミング設計に役立つことを願っています。