以编程方式调整文本区域的大小，而无需修改最小大小

Question

As you can see here , the textarea won't resize under 100px*100px. Apparently, it's the normal behaviour.

But how can I initialize a textarea to a custom size, and then let the user resize it at the size he wants afterwards (bigger AND smaller) without using jQuery ui?

The only way seems to be using the mouse down/move/up events, right?

Here is a related question (with no related answers).

Answer 1

In Chrome, you cant resize a textarea to a size smaller than its original height and width .

This is actually specified in the W3C specifications , which disctates browsers can defined such characteristics:

The user agent may restrict the resizing range to something suitable, such as between the original formatted size of the element, and large enough to encompass all the element's contents.

That said, this has also been raised as a bug in Chrome

You can, however, override this using Javascript, simply give your textarea the class resizable and add the below to your page:

Demo Fiddle

function resizableStart(e){
    this.originalW = this.clientWidth;
    this.originalH = this.clientHeight;
    this.onmousemove = resizableCheck;
    this.onmouseup = this.onmouseout = resizableEnd;
}
function resizableCheck(e){
    if(this.clientWidth !== this.originalW || this.clientHeight !== this.originalH) {
        this.originalX = e.clientX;
        this.originalY = e.clientY;
        this.onmousemove = resizableMove;
    }
}
function resizableMove(e){
    var newW = this.originalW + e.clientX - this.originalX,
        newH = this.originalH + e.clientY - this.originalY;
    if(newW < this.originalW){
        this.style.width = newW + 'px';
    }
    if(newH < this.originalH){
        this.style.height = newH + 'px';
    }
}
function resizableEnd(){
    this.onmousemove = this.onmouseout = this.onmouseup = null;
}
var els = document.getElementsByClassName('resizable');
for(var i=0, len=els.length; i<len; ++i){
    els[i].onmouseover = resizableStart;
}

Answer 2

Textarea has attribute rows and cols. Try to define this as per your custom size.. ie

<textarea rows="4" cols="50">
I am 4 rows and 50 columns textarea..
</textarea>