10

我喜欢 Chrome 漂亮的 textarea 调整大小控件。然而，一个例外是 textarea 似乎有一个很难通过自定义 css 更改的最小高度/最小宽度设置，即使使用!important限定符也是如此。

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

是否可以通过 jQuery 覆盖它？

4

3 回答 3

5

这些“ 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

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

于 2013-04-25T12:37:42.350 回答
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.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

于 2013-08-13T13:30:24.453 回答
3

另一个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;
}

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

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

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

于 2013-08-13T17:17:15.770 回答