100分改代码——textarea自由变换（有参考）

最近看到http://www.regextester.com/这个页面有个能自由变化宽、高的textarea，
哪位有时间帮我把这个textarea单独取出来，近期要用。自己比较忙，暂时没时间弄。
谢谢！

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <TITLE>test</TITLE>
    <STYLE type="text/css">
        BODY {font: 11px Verdana;}
    #tabb{
    width:18px;height:18px;background:white;border:none;
    font: normal 16px "Arial", "MS Sans serif", verdana;
    cursor:se-resize !important;
    }
    #tabb{
    position:relative;
    left:0px;
    top:15px;
    }
    </STYLE><script>
    var ss=0;
    var sx=0;
    var sy=0;
    var sxn=0;
    var syn=0;
    function tabdown(e){
    if (window.event){
    sx = (event.clientX + document.body.scrollLeft);
    sy = (event.clientY + document.body.scrollTop);
    }else{
    sx = (e.clientX + document.body.scrollLeft);
    sy = (e.clientY + document.body.scrollTop);
    }
    ss=1;
    }function tabup(e){
    var oTest=document.getElementById('test');
    ss=0;
    }function mmousemove(e){
    if (window.event){
    var newX = (event.clientX + document.body.scrollLeft);
    var newY = (event.clientY + document.body.scrollTop);
    }else{
    var newX = (e.clientX + document.body.scrollLeft);
    var newY = (e.clientY + document.body.scrollTop);
    } if (ss==1){ var oTest=document.getElementById('test');
    var distanceX = (newX - sx);
    var distanceY = (newY - sy);
    sx= newX;
    sy = newY;
    ndx=(oTest.offsetWidth+distanceX);
    ndy=(oTest.offsetHeight+distanceY);
    if ((ndx>30) && (ndy>30)&&(ndx<1000)&& (ndy<1000)){
    oTest.style.width=ndx+'px';
    oTest.style.height=ndy+'px';
    }
    }
    }function init(){

    var tabbl=document.getElementById('tabb'); tabbl.onmousedown = tabdown;
    tabbl.onmouseup = tabup;

    document.onmousemove=mmousemove;
    document.onmouseup=tabup;}
    </script>
    </HEAD>
    <BODY onload="init();">
    Test on Text:
    <TEXTAREA name="test" id="test"></TEXTAREA>
    <input type="button" id="tabb" title="Drag to resize" value="&hArr;" />
    </BODY>
    </HTML>
      

  2.   

    跟改变div层大小的原理是一样的
      

  3.   

    <html>
    <HEAD>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/css>
    BODY {
    font: 11px Verdana;
    } #taba, #tabb {
    width: 18px;
    height: 18px;
    background: white;
    border: none;
    font: normal 16px "Arial", "MS Sans serif", verdana;
    cursor: se-resize !important;
    } .abbr {
    border-bottom: 1px dotted black;
    } #tabb {
    position: relative;
    left: 0px;
    top: 15px;
    } #test {
    font-size: 12px;
    border: 1px solid gray;
    height: 150px;
    width: 250px
    }
    </STYLE>
    <SCRIPT src="script.js" type=text/javascript>
    function getExpiry(days){
    var now = new Date();
    now.setTime(now.getTime() + days * 24 * 60 * 60 * 1000);
    return now.toUTCString();
    }

    function readCookie(name){
    var cookie = '' + document.cookie, start = cookie.indexOf(name);
    if (start == -1 || name == "") return '';
    var end = cookie.indexOf(';', start);
    if (end == -1) end = cookie.length;
    return unescape(cookie.substring(start + name.length + 1, end));
    }

    function setCookie(name, value, duration){
    var cookie = name + '=' + escape(value) + ";EXPIRES=" + getExpiry(duration);
    document.cookie = cookie;
    return !!readCookie(name);
    }

    var sx = 0;
    var sy = 0;
    function tabdown(e){
    e = e || window.event;
    sx = (e.clientX + document.body.scrollLeft);
    sy = (e.clientY + document.body.scrollTop);
    document.onmousemove = mmousemove;
    document.onmouseup = tabup;
    }

    function tabup(e){
    var test = document.getElementById('test');
    setCookie('testWidth', test.offsetWidth, 3600);
    setCookie('testHeight', test.offsetHeight, 3600);
    document.onmousemove = document.onmouseup = null;
    }

    function mmousemove(e){
    e = e || window.event;
    var newX = (e.clientX + document.body.scrollLeft),
    newY = (e.clientY + document.body.scrollTop);

    var test = document.getElementById('test'),
    dX = (newX - sx), dY = (newY - sy);
    sx = newX, sy = newY;
    ndx = test.offsetWidth + dX, ndy = test.offsetHeight + dY;
    if ((ndx > 30) && (ndy > 30) && (ndx < 1000) && (ndy < 1000)) {
    test.style.width = ndx + 'px';
    test.style.height = ndy + 'px';
    }
    }

    function init(){
    var tabb = document.getElementById('tabb');
    var test = document.getElementById('test');

    tabb.onmousedown = tabdown;

    zw = parseInt(readCookie('testWidth')) || 0;
    zh = parseInt(readCookie('testHeight')) || 0;
    if ((zw > 30) && (zw < 1000)) test.style.width = zw + 'px';
    if ((zh > 30) && (zh < 1000)) test.style.height = zh + 'px';
    }
    </SCRIPT>
    </head>
    <body onload=init();>
    <textarea id="test">
    </textarea>
    <input id="tabb" title="Drag to resize" type="button" value="⇔">
    </body>
    </html>
      

  4.   

    非常感谢lihui_shine和xfsnero！
    xfsnero 的代码脱离原有js，效果很好经测试可用（IE7）xfsnero 的代码测试后TT、FF、IE7都不能执行（js我已经下载）
      

  5.   

    不好意思，两位的名字弄错了：）
    再次感谢！lihui_shine的代码脱离原有js，效果很好经测试可用（IE7）