Расширяющийся круг на основе введенного текста

Question

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

<input type="text"/> 

и круг КСС:

input {border-radius: 50%;width: 50px;height: 50px;} 

[править]

Вот мой jsfiddle http://jsfiddle.net/UxtJV/391/

проблема заключается в том, что мне это нужно, чтобы уменьшить при удалении текста

Answer 1

Если круг ваш вход и вы пытаетесь расширить его как пользователь печатает, это должно дать вам общее представление:

$('#circle').on('input', function() { 
    var textLength = $(this).val().length; 
    var textWidth = parseInt($('#circle').css('font-size'), 10) * textLength + 'px'; 
    $('#circle').css('width', textWidth); 
    $('#circle').css('height', textWidth); 
}); 

CSS:

input { 
    border-radius: 50%; 
    min-width: 50px; 
    min-height: 50px; 
    width: 50px; 
    height: 50px; 
    text-align: center; 
    -moz-transition: all 0.5s; 
    -webkit-transition: all 0.5s; 
    transition: all 0.5s; 
} 

Это свойство размера шрифта для вычисления ширины символа, поэтому оно неточно.

JSFiddle: http://jsfiddle.net/verashn/JaNMb/

Answer 2

Я был не уверен, что вы просто хотели, чтобы ширина расширялась, когда conte nt был отредактирован, а высота тоже увеличилась. Я создал последний here on jsfiddle. Он по-прежнему нуждается в некоторой работе, чтобы получить текст по вертикали, но это хороший старт. Для этого мне пришлось использовать div с атрибутом contenteditable, так как входы не будут правильно стираться.