-1

誰かがキーを入力すると、キーが入力されたものに合わせて拡大する円を作成しようとしています。テキストが消去されるたびに、バブルが小さくなります。通常の入力テキストがあります。

<input type="text"/>

円のCSSは次のとおりです。

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

[編集]

これが私のjsfiddleですhttp://jsfiddle.net/UxtJV/391/

問題は、テキストを削除するときに縮小する必要があることです

4

2 に答える 2

2

コンテンツが編集されたときに幅を拡大したいのか、それとも高さを比例して拡大したいのか、私にはわかりませんでした。後者はここで jsfiddle で作成しました。テキストを垂直方向の中央に配置するには、まだ作業が必要ですが、良いスタートです。これを行うには、入力のスタイルが正しくないためdiv、 の属性を使用する必要がありました。contenteditable

于 2013-11-10T22:09:47.860 に答える
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;
}

font size プロパティを使用して文字幅を計算しているため、不正確です。

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

于 2013-11-10T22:10:37.823 に答える