Изменение размера <input>

Question

У меня есть текстовое поле в моем HTML с белой нижней границей при фокусировке, и я хочу, чтобы он менял ширину текстового поля на длину текущего текста (с некоторым пределом, конечно). Я пробовал css min-width и max-width, но, похоже, ничего не делает. Я думаю, что для его реализации с JS потребуется таблица с жесткой кодировкой, которую я не хочу делать.

EDIT:
Это просто в CSS, но вот код:

#container { 
 
    width: 100%; 
 
    height: 52px; 
 
    background: #673ab7; 
 
} 
 

 
#textbox { 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: white; 
 
    background: none; 
 
    border: none; 
 
    vertical-align: top; 
 
    margin-top: 13px; 
 
    margin-left: 13px; 
 
    outline: none; 
 
} 
 

 
#textbox:focus { 
 
    border-bottom: 2px solid white; 
 
}

<div id="container"> 
 
    <input type="text" id="textbox" placeholder="placeholder" /> 
 
</div>

Answer 1

Я нашел способ сделать это без жесткой кодировки ширины после того, как нашел this. Я использую jQuery здесь, потому что я уже использовал его в своем проекте, но его относительно легко переносить на простой JavaScript. Такие символы, как &, <, >, и пространство может его исправить, поэтому их необходимо заменить на &...;.

$(document).ready(function(){ 
 
    $('#textbox').on('input', function(){ 
 
    if($('#textbox').val().length == 0){ 
 
     $('#measure').html($('#textbox').attr('placeholder')); 
 
    }else{ 
 
     var text = $('#textbox').val(); 
 
     text = text.replace(/&/g, '&'); 
 
     text = text.replace(/</g, '&lt;'); 
 
     text = text.replace(/>/g, '&gt;'); 
 
     text = text.replace(/ /g, '&nbsp;'); 
 
     $('#measure').html(text); 
 
    } 
 
    
 
    var w = $('#measure').width(); 
 
    if(w > 600) w = 600; 
 
    $('#textbox').width(w); 
 
    }); 
 
    
 
    $('#textbox').trigger('input'); 
 
});

html, body { 
 
    margin: 0; 
 
} 
 

 
#container { 
 
    width: 100%; 
 
    height: 52px; 
 
    background: #673ab7; 
 
} 
 

 
#textbox { 
 
    font-family: sans-serif; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    color: white; 
 
    background: none; 
 
    border: none; 
 
    vertical-align: top; 
 
    margin-top: 13px; 
 
    margin-left: 13px; 
 
    outline: none; 
 
} 
 

 
#textbox:focus { 
 
    border-bottom: 2px solid white; 
 
} 
 

 
#measure { 
 
    position: absolute; 
 
    visibility: hidden; 
 
    height: auto; 
 
    width: auto; 
 
    white-space: nowrap; 
 
    font-size: 20px; 
 
    font-weight: bold; 
 
    font-family: sans-serif; 
 
    padding: 0; 
 
    margin: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="container"> 
 
    <input type="text" id="textbox" placeholder="placeholder" /> 
 
</div> 
 

 
<div id="measure"></div>

Answer 2

Это должно работать достаточно хорошо:

<form> 
<input type="text" id="textfield" onkeyup="changeSize()"> 
</form> 

var sizeIs=20; 
function changeSize(){ 
sizeIs=sizeIs+5; 
document.getElementById("textfield").style.width= sizeIs+"px"; 
} 

Что это делает , каждый раз, когда пользователь вводит символ, функция f ires и увеличивает размер текстового поля. Вы можете использовать это как руководство, чтобы делать все, что вам нужно.