10

Chromeの気の利いたtextareaサイズ変更コントロールが好きです。ただし、1つの例外は、textareaにハードmin-height / min-width設定があり、！important修飾子を使用しても、カスタムcssを介して変更できないように見えることです。

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

おそらくjQueryを介してこれをオーバーライドすることは可能ですか？

4

3 に答える 3

5

これらの「min-height/ 」は、属性min-widthに依存しています。例えば。が欠落しているか 1 未満の場合、デフォルト値は 20 であるため、最小幅は 20 文字幅になります。colsrowscols

(参照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ライブラリを削除するために、それを単純化しました. これは、外部ライブラリなどを必要としないソリューションです。

使い方？

マウスカーソルが上にある間にテキストエリアのサイズが変更されたかどうかを確認する間隔を追加します。変更された場合、ユーザーがドラッグしたことがわかるため、テキスト領域のサイズを強制的に 1 ピクセル x 1 ピクセルにします。これにより、ユーザーには非常にわずかなちらつきが生じますが、サイズをドラッグしているため、すぐにドラッグ先のサイズに戻りますが、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;
    }
 }
}

修正:

a)。最初は収縮しません 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;
}

上記のソリューションでは、 and を使用してmouseoverandmouseoutをトリガーresizableStartしresizableEndます。問題は、サイズ変更される要素に子がある場合、マウスが子の上に置かれると、要素がmouseoutイベントを受け取り、その直後に、mouserover子からバブリングするイベントを受け取ることです。

これらのイベントを回避するために、イベントを使用して別のソリューションを実装しmouseenterましたmouseleave。

デモ: http://jsfiddle.net/nz8ut/3/

于 2013-08-13T17:17:15.770 に答える