Question

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

<input type="text"/>

和圆圈css是：

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

[编辑]

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

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

Answer 1

我不确定你是否只想在编辑内容时扩展宽度或者按比例扩展高度。我创建了后者here on jsfiddle。它仍然需要一些工作来使文本垂直居中，但这是一个良好的开端。为了做到这一点，我不得不使用属性为div的{{1}}，因为输入的格式不正确。

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;
}

它使用font size属性来计算字符宽度，因此它不准确。

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

根据文本输入扩展圆圈

2 个答案: