Michaelの回答に基づいて、jQueryを使用してこれの独自のバージョンを作成しました。私はこれがほとんどの回答のより簡潔なバージョンであると思います、そしてそれは仕事を成し遂げたようです。
私はここのほとんどの人と同じことをしていますが、スパンを使用して入力テキストを書き込み、幅を取得しています。次に、アクションkeyupと幅を設定しますblur呼び出されるます。
これが実用的なコードペンですです。このコードペンは、これを複数の入力フィールドで使用する方法を示しています。
HTML構造：
<input type="text" class="plain-field" placeholder="Full Name">
<span style="display: none;"></span>
jQuery：
function resizeInputs($text) {
var text = $text.val().replace(/\s+/g, ' '),
placeholder = $text.attr('placeholder'),
span = $text.next('span');
span.text(placeholder);
var width = span.width();
if(text !== '') {
span.text(text);
var width = span.width();
}
$text.css('width', width + 5);
};
上記の関数は、入力値を取得し、余分なスペースを削除し、テキストをスパンに設定して幅を取得します。テキストがない場合は、代わりにプレースホルダーを取得して、代わりにスパンに入力します。スパンにテキストを入力すると、入力の幅を設定します。+ 5幅には、理由の入力がエッジブラウザでほんの少しカットオフされることをなしています。
$('.plain-field').each(function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('keyup blur', function() {
var $text = $(this);
resizeInputs($text);
});
$('.plain-field').on('blur', function() {
var $text = $(this).val().replace(/\s+/g, ' ');
$(this).val($text);
});
これが改善される可能性がある場合は、これが私が考え得る最もクリーンなソリューションであるため、私に知らせてください。