Изменение размера шрифта в textarea, чтобы соответствовать высоте

Question

Я пытаюсь сделать что-то отличное от большинства «измененных размеров» плагинов textarea. Я не пытаюсь изменить размер фактического textarea, а скорее размер шрифта в текстовом поле, чтобы весь текст соответствовал.

В основном я хочу размер шрифта «авто» для текстового поля. Проблема заключается в том, что существует два различных способа, что шрифт должен получить «меньшие»:

1. прессы пользователя «введите» и создает разрыв строки
2. Пользователь вводит больше текста, чем ширина textarea, заставляя его разбиться

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

Кто-нибудь сделал это раньше или узнал о плагине, где это было сделано?

Answer 1

Попробуйте это должно работать, но я не уверен, о производительности Тхо:

HTML

<textarea></textarea> 

Css

textarea { 
    height: 100px; 
    width: 200px; 
    resize: none; 
    font-size: 18px; 
    overflow-y: hidden; 
} 

JQuery

$('textarea').keypress(function(){ 
    if ($(this).get(0).scrollHeight > $(this).height()) { 
     $(this).css('font-size', '-=1'); 
    } 
}); 

пример

http://jsfiddle.net/XCXJb/1/

Answer 2

Вместо использования textarea, вы могли бы использовать div с contenteditable="true".
Это решение работает с удалением текста и увеличением размера шрифта.

HTML

<div class="border" id="border"> 
<div class="block" id="input" contenteditable="true">Click to edit</div> 
</div> 

CSS

.block { 
    width:400px; 
    font-size:25px; 
    font-family:'Helvetica'; 
} 
.block:focus { 
    outline: none; 
} 
.border { 
    border: 1px solid #000; 
    width:400px; 
    height: 200px; 
    padding: 5px; 
    cursor:text; 
} 

JQuery

$('#border').click(function(){ 
    $('#input').focus(); 
}); 

$('#input').keyup(function(event){ 
    while ($(this).height() > 200) { 
     $(this).css('font-size', '-=1'); 
    } 
    if (event.keyCode == 8 || event.keyCode == 46) { 
     while ($(this).height() <= 200 && $(this).css('font-size') <= "25px") { 
      $(this).css('font-size', '+=1'); 
     } 
      $(this).css('font-size', '-=1'); 
    } 
}); 

Exa mple

http://jsfiddle.net/gwyqsk0s/