溫馨提示×

如何用input的輸入值來控制textarea的寬度

小億
159
2023-12-20 15:11:57
欄目: 編程語言

要使用輸入值來控制`textarea`的寬度,您可以使用JavaScript來實現。

首先,在HTML中,為`textarea`添加一個唯一的`id`屬性,這樣我們可以在JavaScript中引用它。例如:

然后,在JavaScript中,您可以使用`addEventListener`函數監聽輸入元素(如`input`)的`input`事件,并根據輸入值來設置`textarea`的寬度。例如:

const inputElement = document.getElementById('myInput');
const textareaElement = document.getElementById('myTextarea');
inputElement.addEventListener('input', function() {
  const inputWidth = inputElement.value.length * 10; // 根據輸入值的長度計算寬度
  textareaElement.style.width = `${inputWidth}px`; // 設置textarea的寬度
});

在上面的代碼中,我們將`input`元素和`textarea`元素存儲到變量中,并為`input`元素的`input`事件添加了一個監聽器。當用戶在`input`元素中輸入內容時,回調函數會被觸發。在回調函數中,我們通過計算輸入值的長度乘以一個適當的因子來確定`textarea`的寬度,并將其應用于`style.width`屬性。

請將`myInput`和`myTextarea`替換為您實際使用的`input`和`textarea`的`id`,并根據需要調整計算寬度的因子。

0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女