Создать текстовое поле с автоматически расширяющейся шириной?

Question

Как мне создать текстовое поле с автоматически расширяемой шириной, чтобы соответствовать его содержимому?

Я постоянно нахожу много информации о расширениях на основе высоты, но не о ширине.Я также хотел бы, чтобы он применялся ко всем текстовым полям на странице, а не только к конкретным.

Answer 1

Не уверен, что это то, что вы имели в виду, но разве это не должно работать?

<script language="javascript">
function expand(f)
{
    f.size = f.size + 1;
}
</script>

<input type="text" size="20" onkeyup="expand(this)" />

Answer 2

Я думаю, что лучшим решением было бы проверить длину текста и изменить текстовое поле, если текст был слишком длинным, вместо проверки для каждого типа ключевого события, которое не должно вызывать расширение.Пример:

<script type="text/javascript">
function expand(textbox){
    var minSize = 20;
    var contentSize = textbox.value.length;
    if(contentSize > minSize)
    {
        textboxSize = contentSize;
    }
    else
    {
        textboxSize = minSize;
    }
}
</script>
<input type="text" size="20" onkeyup="expand(this)" />

Answer 3

Если вы хотите обработать клавишу возврата, используйте это:

<input type="text" value="Sample text" onkeyup="(event.keyCode!==8)?this.size++:this.size--;" size="20"> 

Если вы хотите обработать клавишу возврата и игнорируйте клавиши со стрелками, используйте это:

<input type="text" value="Sample text" onkeyup="if(event.keyCode==8){this.size--;}else if(event.keyCode!==37&&event.keyCode!==38&&event.keyCode!==39&&event.keyCode!==4‌​0){this.size++;}" size="6">