单击时更改textarea高度

单击时更改textarea高度是一个常见的前端开发需求。在这里，我们将提供一个简单的JavaScript和CSS代码示例，以实现这个功能。

首先，我们需要创建一个HTML文件，其中包含一个textarea元素和一个按钮。我们将使用JavaScript监听按钮的单击事件，并在事件触发时更改textarea的高度。

HTML代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Change Textarea Height on Click</title>
   <style>
        textarea {
            width: 100%;
            height: 50px;
            resize: none;
        }
    </style>
</head>
<body>
   <textarea id="myTextarea"></textarea>
   <button id="changeHeightBtn">更改高度</button>

   <script>
        document.getElementById("changeHeightBtn").addEventListener("click", function() {
            document.getElementById("myTextarea").style.height = "100px";
        });
    </script>
</body>
</html>

在这个示例中，我们使用了一个按钮的单击事件来触发更改textarea高度的操作。当用户单击按钮时，textarea的高度将更改为100像素。

我们还添加了一些CSS样式，以使textarea具有更好的外观。在这个示例中，我们设置了textarea的宽度为100%，高度为50像素，并禁用了文本框的大小调整。

推荐的腾讯云相关产品：