<textarea> изменить размер шрифта IE 10

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

У меня возникает следующая проблема при попытке изменить размер шрифта в текстовой области, ниже приведен код, который я использую для изменения размера шрифта в зависимости от высоты textarea

// Called on keyup
that._adaptFontSize = function(){
  var i = 1;
  while ( $textArea[0].scrollHeight <= $textArea.height() ){
    console.log('Iteration : '+(i++));
    $textArea.css('font-size', '+=1');
  }
};

Моя идея состоит в том, чтобы максимизировать размер шрифта на основе высоты textarea (возможно, я должен также рассмотреть ширину.

Моя проблема заключается в том, что приведенный выше код создает разные результаты на основе браузера, в Chrome и Safari размер шрифта в конце цикла одинаковый для Firefox - это двойной, я действительно не понимаю, что происходит. этот базовый fiddle показывает проблему

ОБНОВЛЕНИЕ 1

Я обнаружил, что проблема вычисления неправильного размера происходит из присутствия заполнителя.

Итак, в основном на Chrome/Safari, если нет заполнителя, размер шрифта в конце итерации равен размеру, который я получаю в Firefox. Таким образом, есть что-то не так, полагаясь на местозаполнитель для вычисления максимального размера.

ОБНОВЛЕНИЕ 2

следующий fiddle делает более или менее то, что я хотел бы достичь, реальная проблема , что она не работает на IE 10, причина в том, что scrollHeight на IE10 не изменяется при изменении размера шрифта.

ОБНОВЛЕНИЕ 3

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

Мне было интересно, существует ли альтернатива scrollHeight для решения этой проблемы, но пока я не нашел никакого рабочего решения

Ответ 1

Chrome вычисляет scrollHeight как максимальную высоту текста заполнителя и высоту содержимого textarea. Я не знаю, была ли эта ошибка или функция.

Обходной путь прост - очистите placeholder до настройки размера шрифта, а затем восстановите его:

var textArea = $('.area');

var keyupHandler = function(e) {
  console.log('keyup');
  var ph= textArea[0].placeholder;
  textArea[0].placeholder= '';
  while ( textArea[0].scrollHeight <= textArea.height()) {
    console.log('increase');
    textArea.css('font-size', '+=1');
  }
  while ( textArea[0].scrollHeight > textArea.height()) {
    console.log('decrease');
    textArea.css('font-size', '-=1');
  }
  textArea[0].placeholder= ph;
}
textArea.on('keyup',keyupHandler);

Ответ 2

Мне удалось увеличить и уменьшить шрифт в соответствии с текстом, введенным в текстовую область

Ссылка на скрипку

а javascript изменен как ниже

var textArea = $('.area');
var maxTextSize = '75';
var keyupHandler = function (e) {
    console.log('keyup');
    console.log(textArea[0].clientHeight);
    console.log(textArea[0].scrollHeight);
    console.log($("#ta").css('font-size'));
    while (textArea[0].clientHeight = textArea[0].scrollHeight && $("#ta").css('font-size') < maxTextSize) {
        console.log('font increase');
        textArea.css('font-size', '+=1');
    }

    while (textArea[0].clientHeight < textArea[0].scrollHeight) {
        console.log('increase');
        textArea.css('font-size', '-=1');
    }


}
textArea.on('keydown', keyupHandler);

Изменить: проверено в firefox 25.01, а также

Ответ 3

UPDATE

Я думаю, что ваша проблема - это местозаполнитель. Chrome и Safari также изменят размер текста заполнителя, делая его определяющим текстом после того, как вы начнете вводить текст. Если вы оставите его, он отлично работает: http://jsfiddle.net/me2loveit2/qjvbhquj/11/

OLD RESPONSE

Вот одно из решений: http://jsfiddle.net/me2loveit2/qjvbhquj/

Я использую jQuery UI, чтобы связать событие resize с моей функцией fitText().

JS:

$("textarea").resizable({
    resize: function() {
        fitText();
    },
    minWidth:'100px',
    minHeight:'50px'
});
$(document).keyup(function(){
    fitText();
});
function fitText(){
    var textarea = $('textarea');
    while((textarea.get(0).scrollHeight < textarea.outerHeight()) && (textarea.get(0).scrollWidth < textarea.outerWidth())){
        textarea.css('font-size','+=1');
    }
    while((textarea.get(0).scrollHeight > textarea.outerHeight()) || (textarea.get(0).scrollWidth > textarea.outerWidth())){
        textarea.css('font-size','-=1');
    }
}
fitText();

CSS

textarea{
    text-align: center;
    width:100px;
    height:50px;
    overflow:hidden;
}

HTML:

<textarea>hi this is text</textarea>

Ответ 4

Возможно, вы можете использовать div "contentEditable" вместо текстового поля? Я думаю, что на предоставленной ссылке igmur они также используют div.