Dựa trên câu trả lời của Michael, tôi đã tạo phiên bản này của riêng mình bằng jQuery. Tôi nghĩ rằng nó là một phiên bản sạch hơn / ngắn hơn của hầu hết các câu trả lời ở đây và nó dường như hoàn thành công việc.
Tôi đang làm điều tương tự như hầu hết mọi người ở đây bằng cách sử dụng một nhịp để viết văn bản đầu vào vào sau đó lấy chiều rộng. Sau đó, tôi đang thiết lập chiều rộng khi các hành động keyupvàblur được gọi.
Đây là một codepen làm việc . Codepen này cho thấy làm thế nào điều này có thể được sử dụng với nhiều trường đầu vào.
Cấu trúc 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);
};
Hàm trên nhận giá trị đầu vào, cắt các khoảng trắng thừa và đặt văn bản vào khoảng để lấy chiều rộng. Nếu không có văn bản, thay vào đó, nó sẽ giữ chỗ và thay vào đó vào trong khoảng đó. Khi nó nhập văn bản vào khoảng đó, sau đó đặt chiều rộng của đầu vào. Các + 5trên chiều rộng là bởi vì không có mà đầu vào bị cắt đứt một chút nhỏ trong Edge Browser.
$('.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);
});
Nếu điều này có thể được cải thiện xin vui lòng cho tôi biết vì đây là giải pháp sạch nhất tôi có thể đưa ra.