关于在textarea下方 生成一条bar的问题

Question

加一个层，再定义一个object.style.cursor样式，对text进行操作

Answer 1

<div contenteditable style="position:absolute;left:50px;top:20px;">   
    <textarea id="txt" rows="5" cols="10" style="cursor:move"></textarea>
</div>这样就可以了,不过只能在ie下可以用

Answer 2

前2天看到 ext 有这个功能，做的很不错。 可以参考下用baidu，google，搜索ext即可

Answer 3

贴一下代码：现在只是缺生成生成一条bar的那一块 不知道怎么做.
textarea resize的js如下：
var ElementResizer = {
   moveNode: false,   add: function(elm) {
      var obj = new this._ChildElement(this, elm);      addEvent(elm, 'mousedown', function (e) {
         if(obj.resizePoint(e)) {
            ElementResizer.moveNode = obj;
         }
      });      return obj;
   },   start: function() {
      var self = this;
      addEvent(document.body, 'mouseup', function (e) {
         if(self.moveNode) self.moveNode = false;
      });      addEvent(document.body, 'mousemove', function (e) {
         if(self.moveNode) self.moveNode.doResize(e);
      });
   },   resizePoint: function(e, elm) {
      var offset = Position.offset(elm);
      var page   = Position.page(e);      offset.y += elm.offsetHeight;
      offset.x += elm.offsetWidth;      if(offset.y - 32 < page.y && page.y < offset.y &&
         offset.x - 32 < page.x && page.x < offset.x - 8) {
         return true;
      }
   },   doResize: function(e, elm) {
      var offset = Position.offset(elm);
      var page   = Position.page(e);      var width  = page.x - offset.x + 24;
      var height = page.y - offset.y + 16;
      if (width  < 50) width  = 50;
      if (height < 50) height = 50;      elm.style.height = height + 'px';
      elm.style.width  = width  + 'px';
   }
}ElementResizer._ChildElement = function() {
   this.initialize.apply(this, arguments);
}ElementResizer._ChildElement.prototype = {
   initialize: function(base, elm) {
      this.base = base;
      this.elm  = elm;
   },   resizePoint: function(e) {
      return this.base.resizePoint(e, this.elm);
   },   doResize: function(e) {
      return this.base.doResize(e, this.elm);
   }
}var Position = {
   offset: function(elm) {
      var pos = {};
      pos.x = this.getOffset('Left', elm);
      pos.y = this.getOffset('Top', elm);
      return pos;
   },   getOffset: function(prop, el) {
      if(!el.offsetParent || el.offsetParent.tagName.toLowerCase() == "body")
         return el['offset'+prop];
      else
         return el['offset'+prop]+ this.getOffset(prop, el.offsetParent);
   },   page: (document.all) ?
      (function() {
         var pos = {};
         pos.x = event.x + (document.body.scrollLeft || document.documentElement.scrollLeft);
         pos.y = event.y + (document.body.scrollTop  || document.documentElement.scrollTop);
         return pos;
      })
      :
      (function(e) {
         var pos = {};
         pos.x = e.pageX;
         pos.y = e.pageY;
         return pos;
      })
}var addEvent = (window.addEventListener) ?
   (function(elm, type, event) {
      elm.addEventListener(type, event, false);
   }) : (window.attachEvent) ?
   (function(elm, type, event) {
      elm.attachEvent('on'+type, event);
   }) :
   (function(elm, type, event) {
      elm['on'+type] = event;
   }) ;
调用以上js：
<script type='text/javascript'>
         addEvent(window, 'load', function() {
            var textareas = document.getElementsByTagName('textarea');            for(var i = 0;elm = textareas[i];i++) {
               (function(elm) {
                  var obj = ElementResizer.add(elm);
                  var cursor = false;                  addEvent(elm, 'mousemove', function (e) {
                     if(!cursor && obj.resizePoint(e)) {
                        elm.style.cursor = 'se-resize';
                        cursor = true;
                     } else if(cursor && !obj.resizePoint(e)) {
                        elm.style.cursor = 'default';
                        cursor = false;
                     }
                  });
               })(elm);
            }            ElementResizer.start();
         });
      </script>

Answer 4

<div>
<textarea id="main"></textarea>
<div id="bar" style="text-align:right"><span onmouseover="bar.style.backgroundColor='#ccc';">&nbsp;</span></div>
</div>var old_left, old_top;
var old_width, old_height;
bar.onmousedown = function(ev){
  var ev = ev || window.event;
  old_left = mousePos(ev).x;
  old_top = mousePos(ev).y;
  old_width = main.offsetWidth;
  old_height = main.offsetHeight;
};
bar.onmousemove = function(ev){
  var ev = ev || window.event;
  var width = old_width-(old_left-mousePos(ev).x);
  var height = old_height-(old_top-mousePos(ev).y);
  main.style.width = width-2+"px";
  main.style.height = height-16+"px";
};function mousePos(ev)
{
  if(window.event)
  {
    return {
      x: event.clientX + document.documentElement.scrollLeft,
      y: event.clientY + document.documentElement.scrollTop
    };
  }
  else
  {
    return {
      x: ev.pageX,
      y: ev.pageY
    };
  }
}//基本代码