Question

正如您所看到的here，textarea不会在100px * 100px下调整大小。显然，这是正常行为。

但是我如何将textarea初始化为自定义大小，然后让用户在不使用jQuery ui的情况下以之后想要的大小调整大小（更大和更小）？

唯一的方法似乎是使用鼠标按下/移动/向上事件，对吧？

Here是一个相关问题（没有相关答案）。

Answer 1

在Chrome中，您无法将textarea的尺寸调整为小于其原始height和width的尺寸。

这实际上是在W3C specifications中指定的，它区分了浏览器可以定义的这样的特征：

用户代理可能会将调整大小范围限制为适合的范围，例如元素的原始格式化大小和大足以包含所有元素的内容。

尽管如此，这也被提升为bug in Chrome

但是，您可以使用Javascript覆盖此内容，只需将您的textarea设为resizable类，然后将以下内容添加到您的页面中：

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具有属性行和列。尝试根据您的自定义尺寸定义.. 即。

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

以编程方式调整textarea大小而不修改min-size

2 个答案:

Demo Fiddle