Пользовательский CSS, чтобы позволить chrome textarea изменить размер меньше исходного состояния?

Question

Мне нравится изящный контроль размера Chrome textarea. Тем не менее, единственным исключением является то, что текстовая область имеет жесткую настройку min-height/min-width, которая не может быть изменена с помощью пользовательского css, даже с ! Важными квалификаторами.

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)

Тот факт, что вы не можете изменить размер textarea под его начальными размерами сообщается как ошибка ( https://code.google.com/p/chromium/issues/detail?id=94583), хотя

Пользовательский агент может ограничить диапазон изменения размера чем-то подходящим, например, между исходным форматированным размером элемента и достаточно большим, чтобы охватить все содержимое элемента.

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

К сожалению, похоже, сейчас нет способа изменить это поведение.

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<len; ++i){
    els[i].onmouseover = resizableStart;
}

---

Решение выше использует mouseover а также mouseout для запуска resizableStart а также resizableEnd, Проблема заключается в том, что если у изменяемого элемента есть дочерние элементы, то при наведении мыши на дочерний элемент элемент получает mouseout событие, и сразу после этого он получает mouserover событие, которое пузырится от ребенка.

Чтобы избежать этих событий, я реализовал другое решение с mouseenter а также mouseleave События:

Демо: http://jsfiddle.net/nz8ut/3/

Answer 3

Вот ответ, который вы ищете. Это мое оригинальное решение, так что вы сначала увидели его здесь!!

Код, который я сделал ниже, находится в его самой основной форме. Я упростил это, чтобы удалить библиотеку Javascript, которую я обычно использовал бы вместе с другими пользовательскими вещами, которые мне пришлось бы объяснить. Это решение без каких-либо внешних библиотек и т. Д.

КАК ЭТО УСТРОЕНО?

Он добавляет интервал, который проверяет, изменился ли размер текстовой области, пока курсор мыши находится над ним. Если он меняется, мы знаем, что пользователь перетащил его, поэтому мы устанавливаем размер текстовой области равным 1 на 1. Это создает очень слабое мерцание для пользователя, но поскольку он перетаскивает размер, он мгновенно возвращается к размеру, к которому перетаскивает его, только сейчас он будет уменьшаться до 1 пикселя на 1 пиксель.

КОД

Демо: 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;
    }
 }
}

Исправления:

а). Это не сжимается в первый раз б). Вам не нужно никаких дополнительных CSS с ним