自定义CSS允许chrome textarearesize小于初始状态？

我喜欢Chrome的漂亮textarearesize控制。 但是，唯一的例外是textarea似乎有一个难以通过自定义css更改的最小高度/最小宽度设置，即使使用！important限定符也是如此。

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

有可能通过jQuery覆盖这个吗？

Answer 1

这些“ min-height / min-width ”依赖于cols和rows属性。 例如。 如果cols缺失或小于1，则其默认值为20，因此最小宽度为20个字符宽度。

（参见http://www.w3.org/TR/html5/forms.html#the-textarea-element ）

您无法在初始尺寸下调整textarea大小的事实被报告为错误（ https://code.google.com/p/chromium/issues/detail?id=94583 ）

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

http://www.w3.org/TR/css3-ui/#resize

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

Answer 2

另一个JavaScript解决方案：

演示 ： http ： //jsfiddle.net/nz8ut/2/

 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 

---

上面的解决方案使用mouseover和mouseout来触发resizableStart和resizableEnd 。 问题是，如果被resize的元素有子节点，当鼠标放在子mouserover ，该元素会接收一个mouseout事件，然后，它会接收到一个从子mouserover起泡的mouserover事件。

为了避免这些事件，我使用了mouseenter和mouseleave事件实现了另一个解决方案：

演示 ： http ： //jsfiddle.net/nz8ut/3/

Answer 3

这是您正在寻找的答案。 这是我原来的解决方案，所以你先在这里看到了!!

我在下面完成的代码是最基本的forms。 我已经简化了它以删除我通常使用的Javascript库以及我必须解释的其他自定义内容。 这是解决方案，无需任何外部库等。

这个怎么运作？

它添加了一个间隔，用于检查当鼠标光标在其上时textarea大小是否已更改。 如果它改变了，我们知道用户被拖动，所以我们强制textarea大小为1px乘1px。 这为用户创建了一个非常轻微的闪烁，但由于它们拖动的大小立即回到它们拖动它的大小，只是现在，它将一直缩小到1px 1px。

代码

演示 ： http ： //jsfiddle.net/greatbigmassive/zJ4z5/5/

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

修正：

一个）。 它不会第一次缩小b）。 你不需要任何额外的CSS