javascript - 根据输入的文本扩展圆圈

Question

我正在尝试创建一个圆圈，如果有人在其中键入任何内容，它将扩大以适应键入的内容。每当删除文本时，气泡就会变小。我有一个正常的输入文本。

<input type="text"/>

圆圈css是：

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

[编辑]

这是我的 jsfiddle http://jsfiddle.net/UxtJV/391/

问题是我需要在删除文本时缩小它

Answer 1

我不确定您是否只是想在编辑内容时扩大宽度，还是想按比例扩大高度。我在 jsfiddle 上创建了后者。它仍然需要一些工作才能使文本垂直居中，但这是一个好的开始。为了做到这一点，我不得不使用div带有 as 属性的a，contenteditable因为输入的样式不正确。

Answer 2

如果圆圈是您的输入，并且您试图在用户输入时扩展它，这应该会给您一个粗略的想法：

$('#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/