Jquery 自定义CSS以允许chrome textarea的大小小于初始状态？

我喜欢Chrome的漂亮的文本区域大小控制。但是，有一个例外是，文本区域似乎有一个硬的最小高度/最小宽度设置，即使使用，也无法通过自定义css进行更改！重要的限定符

textarea#myTextArea{min-height:0 !important;min-width:0 !important}

是否可以通过jQuery覆盖此项？

这些“

最小高度

/

最小宽度

”依赖于

cols

和

行

属性。 例如，如果缺少

cols

或小于1，则其默认值为20，因此最小宽度为20个字符

（参见）

无法在初始尺寸下调整

textarea

大小的事实被报告为错误（）

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

---

不幸的是，目前似乎没有办法改变这种行为。

以下是您正在寻找的答案。 这是我最初的解决方案，所以您首先在这里看到了

下面的代码是最基本的形式。我已经对它进行了简化，删除了我通常使用的Javascript库以及其他需要解释的自定义内容。这是不需要任何外部库等的解决方案

它是如何工作的？ 它添加了一个间隔，检查鼠标光标在文本区域上时文本区域大小是否已更改。如果它发生变化，我们知道用户拖动了文本区域，因此我们强制文本区域大小为1px乘以1px。这会为用户创建一个非常轻微的闪烁，但由于用户拖动的大小会立即返回到拖动到的大小，直到现在，它会一直缩小到1px乘以1px

代码 演示：

修复：

a） 。它不会第一次收缩

---

b） 。您不需要任何额外的CSS，另一个javascript解决方案：

演示：

函数大小调整开始（e）{
this.originalW=this.clientWidth；
this.originalH=this.clientHeight；
this.onmousemove=resizeblecheck；
this.onmouseup=this.onmouseout=resizebleend；
}
函数大小调整复选框（e）{
if（this.clientWidth！==this.originalW | | this.clientHeight！==this.originalH）{
this.originalX=e.clientX；
this.originalY=e.clientY；
this.onmousemove=resizeblemove；
}
}
函数大小调整移动（e）{
var newW=this.originalW+e.clientX-this.originalX，
newH=this.originalH+e.clientY-this.originalY；
if（newW对于（var i=0，len=els.length；ii，如果您通过将class/id应用于元素并在class/id上设置这两个值来添加这两个值，那么应该可以做到这一点。问题是，一旦初始大小设置为document.load，比方说400px×100px，Chrome将不接受最小高度/最小宽度（运行时css）不管怎样，这都比初始大小小。具有
resize
属性的元素也会出现同样的问题：我用您的代码制作了一个jsfiddle:。它可以工作，但我第一次将鼠标移到元素上时，它就变小了！请注意：千万不要将
setTimeout
/
setInterval
与字符串一起使用，因为这样它们会使用devil
eval
！感谢您的反馈。我已经克服了“变小”的问题。原因是textarea没有任何样式宽度或高度作为开始。在年第一次将计算的宽度、高度和边距应用到它。现在一切都好了：）看我的小提琴！
function TA_start(id){
var ta = document.getElementById(id);
if(typeof(ta.resizeCheckStarted) == "undefined"){
    ta.resizeCheckStarted = true;
    ta.resizeUpdated = false;
    var cs = window.getComputedStyle(ta,null);
    ta.originalH   = cs.getPropertyValue("height");
    ta.originalW   = cs.getPropertyValue("width");
    ta.originalM   = cs.getPropertyValue("margin");
    ta.style.width = ta.originalW;
    ta.style.height= ta.originalH;
    ta.style.margin= ta.originalM;
    ta.resizeCheck = setInterval("TA_checkMe('"+id+"')",100);
 }
 }

function TA_checkMe(id){
 var ta = document.getElementById(id);
 if(ta.originalW != ta.style.width || ta.originalH != ta.style.height){
    ta.resizeUpdated = true;
    ta.originalW = ta.style.width;
    ta.originalH = ta.style.height;
    ta.style.width="1px";
    ta.style.height="1px";
    clearInterval(ta.resizeCheck);
 }
}

function TA_stop(id,init){
 var ta = document.getElementById(id);
 if(typeof(init)=="undefined"){
    if(typeof(ta.stopResizeCheck)=="undefined"){
        ta.stopResizeCheck = setTimeout("TA_stop('"+id+"',true)",500);
    }
 } else {
    clearInterval(ta.resizeCheck);
    if(ta.resizeUpdated != true){
        delete ta.resizeCheckStarted;
    }
 }
}

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;
}