div模拟textarea且高度自适应

需求

我们知道文本超出 textarea 高度后，textarea 就会出现滚动条，需求就是让 textarea 高度跟随文本高度变化，屏蔽滚动条，原来做过用js去监听文本行数，然后改变文本框的高度，这实在是麻烦，而且效果不佳，接下来就用简单的方法来实现。

实现

很简单，给 div 加上H5新属性 contenteditable 就行了，来看：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .test{

            width: 200px;

            min-height: 50px;

            border: 1px solid #999999;

        }

    </style>

</head>

<body>

    <div class="test" contenteditable="true"></div>

</body>

</html>

效果大概就是这样，此时高度会跟随内容变化

div模拟textarea且高度自适应

emmm...貌似不比textarea好看，而且 div 没有 placeholder 属性，OK优化一下，再用css模拟 placeholder 属性，请看：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .test{

            width: 200px;

            min-height: 50px;

            font-size: 12px;

            padding: 5px;

            border: 1px solid #999999;

        }

        .test:empty::before{

            color: #EEEEEE;

            content: attr(placeholder);

        }

    </style>

</head>

<body>

    <div class="test" contenteditable="true" placeholder="亲，请输入您的评价~"></div>

</body>

</html>

效果是这样

div模拟textarea且高度自适应

个人觉得不错了，如果觉得丑那就再优化一下样式，比起用 js 监听高度变化，这个更实用，一个字，怎么简单怎么来！

秒客网

div模拟textarea且高度自适应

需求

实现

相关文章