css textarea 高度自适应,无滚动条-前端开发

要实现CSS textarea的高度自适应且无滚动条，需要结合CSS的resize属性和JavaScript的代码实现。

要实现CSS textarea的高度自适应且无滚动条，需要结合CSS的resize属性和JavaScript的代码实现。

1. 使用CSS的resize属性

CSS有一个resize属性，它可以定义元素是否可以被用户缩放，同时也能控制textarea的高度是否可以自适应。我们可以将resize属性应用到textarea元素上，并设置为vertical(垂直方向)和none（不可调整大小）。

示例如下：

textarea{
    resize:none;
    height:auto;
    overflow:hidden;
    width:100%;
    box-sizing:border-box;
}

在上述代码中，我们将textarea元素的resize属性设置为none，这样文本框就不能被用户缩放。同时，我们设置textarea的高度自适应并隐藏垂直滚动条。使用box-sizing属性可以保证元素的宽度和高度不会改变，即使border和padding的宽度会影响元素的实际宽度和高度。

2. 使用JavaScript自适应高度

虽然CSS的resize属性可以实现textarea的高度自适应，但是它的兼容性比较差。因此，我们可以使用JavaScript来实现高度自适应。以下是一个简单的实现方法：

function autoResizeTextarea(textarea){
    textarea.style.height = "auto";
    textarea.style.height = textarea.scrollHeight + "px";
}

上述代码可以实现textarea的高度自适应，并且可以随着文本内容的改变动态地向下扩展。我们可以将该函数绑定到textarea元素的oninput事件上，每次文本内容改变时都会调用该函数，从而实现高度自适应。

示例代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Textarea高度自适应示例</title>
    <style type="text/css">
        textarea{
            resize:none;
            height:auto;
            overflow:hidden;
            width:100%;
            box-sizing:border-box;
            border:1px solid #ccc;
            padding:10px;
        }
    </style>
</head>
<body>
    <textarea id="myTextarea" oninput="autoResizeTextarea(this)"></textarea>
    <script type="text/javascript">
        function autoResizeTextarea(textarea){
            textarea.style.height = "auto";
            textarea.style.height = textarea.scrollHeight + "px";
        }
    </script>
</body>
</html>

在上述示例代码中，我们创建了一个ID为myTextarea的textarea元素，并将autoResizeTextarea函数绑定到oninput事件上，实现了高度自适应。

除了绑定到oninput事件上，我们还可以将autoResizeTextarea函数绑定到窗口的onresize事件上，当窗口大小改变时自动调整textarea的高度。如下所示：

window.onresize = function(){
    autoResizeTextarea(document.getElementById('myTextarea'));
}

这样，即使用户改变窗口大小，文本框也会根据可见区域的大小进行调整。

以上是实现CSS textarea高度自适应且无滚动条的完整攻略，如有不清楚之处，请随时询问。

1. 使用CSS的resize属性

2. 使用JavaScript自适应高度

基础教程推荐