如何在 JavaScript 和 jQuery 中自動縮放輸入欄位的寬度以符合其內容？

自動縮放輸入欄位的寬度以符合輸入值

在Web 開發領域，通常需要動態調整寬度輸入欄位的長度以符合其內容的長度。這可確保該欄位僅佔據螢幕上必要的空間。以下是如何使用JavaScript 和jQuery 實現此目的：

解決方案：

1.將初始寬度設定為自動：

首先，將輸入欄位的寬度屬性指定為auto。這允許字段根據其內容自然擴展。

input {
  display: block;
  margin: 20px;
  width: auto;
}

2.更新擊鍵寬度：

接下來，每次按下按鍵時使用 jQuery 更新輸入欄位的大小屬性。該屬性決定該欄位可以容納的字元數。透過將其設定為內容的長度，該欄位將自動縮放到適當的寬度。

$('input[type="text"]').keyup(function() {
  $(this).attr('size', $(this).val().length);
});

3.頁面載入時調整大小：

設定事件處理程序後，在頁面載入後手動觸發調整大小行為。這可確保欄位在初始顯示時尺寸正確。

$('input[type="text"]').each(function() {
  $(this).attr('size', $(this).val().length);
});

範例：

考慮以下HTML：

<input type="text" value="I've had enough of these damn snakes, on this damn plane!" />
<input type="text" value="me too" />

當頁面載入時，兩個輸入欄位的寬度都會調整以適應其文字content.

注意：

雖然此方法有效地縮放了輸入欄位的寬度，但可能會導致在右側添加一些填充。為了實現更緊密的配合，您可以考慮使用測量文字像素大小並相應調整寬度屬性等技術。

以上是如何在 JavaScript 和 jQuery 中自動縮放輸入欄位的寬度以符合其內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！