温馨提示×

如何用input的输入值来控制textarea的宽度

小亿
138
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