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

我们可以用JavaScript来自动调整一个输入字段的宽度。这可以通过使用元素的样式属性来设置基于输入值的宽度来实现。通过在用户输入时不断地更新宽度，我们可以确保输入字段始终是适合输入的尺寸。

下面是一种使用JavaScript自动调整输入栏宽度的方法 −

使用JavaScript选择输入字段，例如，使用document.querySelector()方法 –

var inputField = document.querySelector("#myInput");

给输入字段添加一个事件监听器，监听 “输入 “事件—-。

inputField.addEventListener("input", adjustWidth);

创建一个名为 “adjustWidth “的函数，根据输入字段值的长度来计算输入字段的宽度 –

function adjustWidth() {
   var value = inputField.value;
   var width = value.length * 8 + 25; // 8px per character
   inputField.style.width = width + "px";
}

每当输入字段的值发生变化时，调用调整宽度函数—-。

inputField.addEventListener("input", adjustWidth);

现在，输入字段的宽度将随着用户的输入而自动调整。

注意 - 上面的例子中使用的宽度计算是基于每个字符8px。你可能需要根据你的输入字段的字体和风格来调整这些值。

例子

下面是一个完整的例子，说明如何使用JavaScript自动调整输入框的宽度。

<html>
<head>
   <style>
      #myInput {
            font-size: 20px;
      }
   </style>
</head>
   <body>
      <input type="text" id="myInput">
      <script>
         // adjust width on initial load
         window.onload = adjustWidth;

         // Select the input field
         var inputField = document.querySelector("#myInput");

         // Add an event listener to the input field
         inputField.addEventListener("input", adjustWidth);

         // Function to adjust the width of the input field
         function adjustWidth() {
            var value = inputField.value;
            var width = value.length * 8 + 25; // 8px per character
            inputField.style.width = width + "px";
         }
      </script>
   </body>
</html>