求解，用javascript实现在textarea中按tab键功能。

[云中雁荡山]

用javascript实现，不要引用任何库文件。具体功能：
1、在textarea中按tab键能够实现定位（在textarea中增加4个空格并且光标还在textarea中，和其他非在线编辑器一样）。
2、兼容IE,Firefox。
注：增加空格的问题我已找到方法，但是光标跑到textarea外边去了。
寻求答案，希望给出例子或相关代码。

[云中雁荡山]

<textarea   id='tabTest'   style="width:500px;height:200px;"   onkeydown='testTab()'></textarea>   

 <SCRIPT   LANGUAGE="JavaScript">   
  <!--
      function testTab() {
          var sel = document.selection.createRange();
          if (event.shiftKey && event.keyCode == 9) {
              sel.move("character", -4);
              sel.select();
              event.returnValue = false;
              return;
          }
          if (event.keyCode == 9) {
              sel.text = "\u0020\u0020\u0020\u0020";
              //sel.move("character",4);   
              sel.select();
              event.returnValue = false;
          }
      }   
  //-->   
  </SCRIPT>   

<script   language="JavaScript">   
  <!--
      function testTab() {
          var sel = document.selection.createRange();
          var mytext = sel.text;
          var i, j, k;
          if (event.shiftKey && event.keyCode == 9) {
              arr = mytext.split(String.fromCharCode(13, 10))
              mytext = ""

              for (k = 0; k < arr.length; k++) {

                  for (j = 1; j <= 4; j++) {
                      if (arr[k].substr(0, 1) == "\u0020") {
                          arr[k] = arr[k].slice(1)
                      }
                  }

                  mytext += arr[k] + ((k == (arr.length - 1)) ? "" : String.fromCharCode(13, 10));
              }
              with (sel) {
                  sel.text = mytext;
                  collapse(true)
                  moveEnd("character", 0)
                  moveStart("character", (mytext.length) * -1)
                  select()
              }

              window.event.cancelBubble = true;
              event.returnValue = false;
              return;
          }
          if (event.keyCode == 9) {
              arr = mytext.split(String.fromCharCode(13, 10))
              mytext = ""
              for (j = 0; j < arr.length; j++) {

                  mytext += "\u0020\u0020\u0020\u0020" + arr[j] + ((j == (arr.length - 1)) ? "" : String.fromCharCode(13, 10));
              }


              with (sel) {
                  sel.text = mytext;
                  collapse(true)
                  moveEnd("character", 0)
                  moveStart("character", (mytext.length - 4) * -1)
                  select()
              }

              window.event.cancelBubble = true;
              event.returnValue = false;
              return;
          }
      }   
  //-->   
  </script>   

[云中雁荡山]

以上为IE下面实现，寻求Firefox下实现。

[云中雁荡山]

//截获了Tab按键，其他的textarea框不进行此配置
        //下面的代码就是为了实现这个功能，原理很简单，采用上一行的缩进就行
        //只要在html中插入脚本调用set_tab_indent_for_textareas()函数就可以了
        //注1：需要jQuery支持，如果不喜欢jQuery改成裸javascript也很方便的
        //兼容firefox和IE！

        /*------selection operations-------*/
        function insertAtCursor(obj, txt) {
            obj.focus();
            //IE support
            if (document.selection) {
                sel = document.selection.createRange();
                sel.text = txt;
            }
            //MOZILLA/NETSCAPE support
            else {
                var startPos = obj.selectionStart;
                var scrollTop = obj.scrollTop;
                var endPos = obj.selectionEnd;
                obj.value = obj.value.substring(0, startPos) + txt + obj.value.substring(endPos, obj.value.length);
                startPos += txt.length;
                obj.setSelectionRange(startPos, startPos);
                obj.scrollTop = scrollTop;
            }
        }
        function getCaretPos(ctrl) {
            var caretPos = 0;
            if (document.selection) {
                // IE Support
                var range = document.selection.createRange();
                // We'll use this as a 'dummy'
                var stored_range = range.duplicate();
                // Select all text
                stored_range.moveToElementText(ctrl);
                // Now move 'dummy' end point to end point of original range
                stored_range.setEndPoint('EndToEnd', range);
                // Now we can calculate start and end points
                ctrl.selectionStart = stored_range.text.length - range.text.length;
                ctrl.selectionEnd = ctrl.selectionStart + range.text.length;
                caretPos = ctrl.selectionStart;
            } else if (ctrl.selectionStart || ctrl.selectionStart == '0')
            // Firefox support
                caretPos = ctrl.selectionStart;
            return (caretPos);
        }

        function getCurrentLineBlanks(obj) {
            var pos = getCaretPos(obj);
            var str = obj.value;
            var i = pos - 1;
            while (i >= 0) {
                if (str.charAt(i) == '\n')
                    break;
                i--;
            }
            i++;
            var blanks = "";
            while (i < str.length) {
                var c = str.charAt(i);
                if (c == ' ' || c == '\t')
                    blanks += c;
                else
                    break;
                i++;
            }
            return blanks;
        }

        function set_tab_indent_for_textareas() {
            /* set all the tab indent for all the text areas */
            $("textarea").each(function() {
                $(this).keydown(function(eve) {
                    if (eve.target != this) return;
                    if (eve.keyCode == 13)
                        last_blanks = getCurrentLineBlanks(this);
                    else if (eve.keyCode == 9) {
                        eve.preventDefault();
                        insertAtCursor(this, "  ");
                        this.returnValue = false;
                    }
                }).keyup(function(eve) {
                    if (eve.target == this && eve.keyCode == 13)
                        insertAtCursor(this, last_blanks);
                });
            });
        }

    </script>

共享一下，请大家提出修改意见。

[Cnami]

帮顶！！

[泛泛之辈110]

帮顶！！