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

Posted 2023-05-07

【中文标题】自定义CSS以允许chrome textarea调整大小小于初始状态？

【英文标题】：Custom CSS to allow chrome textarea resize smaller than initial state?

【发布时间】：2013-02-15 06:54:58

【问题描述】：

我喜欢 Chrome 漂亮的 textarea 调整大小控件。然而，一个例外是 textarea 似乎有一个硬的 min-height/min-width 设置，即使使用 !important 限定符也无法通过自定义 css 更改。

textarea#myTextAreamin-height:0 !important;min-width:0 !important

是否可以通过 jQuery 覆盖它？

【问题讨论】：

如果您通过将类/id 应用于元素并将它们设置在类/id 上来添加这两个，那么应该可以解决问题。

问题是，一旦在 document.load 中设置了初始大小，假设为 400px x 100px，Chrome 将不会接受小于初始大小，不管。

具有resize 属性的元素也会出现同样的问题：***.com/q/18178301/1529630

【参考方案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)，但

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

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

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

【参考方案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<len; ++i)
    els[i].onmouseover = resizableStart;

---

上面的解决方案使用mouseover和mouseout来触发resizableStart和resizableEnd。问题是，如果要调整大小的元素有子元素，当鼠标放在一个子元素上时，该元素会收到一个mouseout 事件，然后它会收到一个从子元素冒泡的mouserover 事件。

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

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

【参考方案3】：

这就是您要寻找的答案。 这是我最初的解决方案，所以你先在这里看到它！

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

它是如何工作的？

它添加了一个间隔，用于检查当鼠标光标悬停在文本区域上时文本区域的大小是否发生了变化。如果它发生变化，我们知道用户拖动了，所以我们强制 textarea 大小为 1px x 1px。这会给用户带来非常轻微的闪烁，但是因为他们正在拖动大小会立即恢复到他们拖动到的大小，只是现在，它会一直缩小到 1px x 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.;
    ta.style.;
    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;
    
 

修复：

一）。第一次没有缩水 乙）。你不需要任何额外的 CSS

【讨论】：

我用你的代码做了一个 jsfiddle：jsfiddle.net/GLVHc。它可以工作，但是当我第一次将鼠标悬停在元素上时，它变得很小！请注意：永远不要将setTimeout/setInterval与字符串一起使用，因为那样他们就会使用魔鬼eval！

感谢您的反馈。我已经克服了“变小”的问题。原因是 textarea 开始时没有任何样式宽度或高度。第一次应用计算出的宽度、高度和边距。现在一切都好 :) 看看我的小提琴！