如何使用 JavaScript 自动调整输入字段的宽度？

HTML 元素用于为基于 Web 的表单创建交互式控件，以便接受来自用户的数据。 元素是所有 HTML 中最强大和最复杂的元素之一，因为输入类型和属性的组合数量众多。 HTML width 属性用于指定元素的宽度。

动态增加 元素的宽度。
方法一：

• onkeypress 事件在用户按下任意键时发生。
• 选择元素的宽度属性。
• 通过 this.value.length 使其等于输入字段的值的长度

在这里，我们选择 元素并为其添加一个方法，该方法在按下键时发生。此方法动态选择和更新宽度属性的值。

HTML 代码：

 
 
 
     
 
 
    

        Input text
        
    
 
                 

您还可以编写一个 JavaScript函数来检查输入更改时字符串的长度，然后根据字符数 *字符宽度调整输入的宽度。

替代 JavaScript 代码：

$('input').css('width', ((
  input.getAttribute('placeholder').length + 1) * 8) + 'px');
$("input").focusout(function() {
    if (this.value.length > 0) {
        this.style.width = 
          ((this.value.length + 1) * 8) + 'px';
    } else {
        this.style.width = 
          ((this.getAttribute('placeholder').length + 1) * 8)
        + 'px';
    }
});

输出：

方法 2：结合使用 jQuery keypress() 事件和 String.fromCharCode(e.which) 来获取按下的字符。因此，我们可以计算输入元素的宽度。

jQuery代码：

$('input[type="text"]').keypress(function(e) {
    if (e.which !== 0 && e.charCode !== 0) { 
  
        // Only characters
        var c = String.fromCharCode(e.keyCode|e.charCode);
        $span = $(this).siblings('span').first();
  
        // The hidden span takes 
        $span.text($(this).val() + c) ; 
  
        // The value of the input
        $inputSize = $span.width() ; 
  
        // Apply width of the span to the input
        $(this).css("width", $inputSize) ;
     }
}) ;

输出：

浏览器兼容性：

• 铬：是的
• 火狐：是（63.0）
• 边缘：是的
• 互联网浏览器：是的
• 歌剧：是的
• 野生动物园：是的