input和textarea的区别，及手写div模拟textarea

最新推荐文章于 2025-12-01 06:10:14 发布

原创最新推荐文章于 2025-12-01 06:10:14 发布 · 524 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #html5

本文探讨了textarea与input的区别，如textarea内容多行为纯文本，支持rows和cols属性，而input为单行并有多种type。此外，介绍了如何使用div加contenteditable属性模拟textarea，包括添加resize、placeholder功能，并给出了相关示例。特别提示，设置resize属性时，需配合overflow：auto。

区别：

textarea标签是成对的，有结束标签进行闭合，标签的内容写在标签对中间；input是单个标签，标签的内容通过 value属性设置；
textarea的值是纯文本；input的值根据类型不同而不同；
textarea没有type属性；input有多种type来满足表单与用户的数据交互；
textarea的值可以是多行的，并且有rows和cols来控制多行结构；的值是单行的；

模拟textarea

在div上添加contenteditable="true"使div处于可编辑模式
给div添加 resize: vertical属性，使用户可以自由拖动高度
给div添加placeholder属性，作为无内容显示
通过css获取placeholder并显示出来

Demo

下面展示一些 内联代码片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .box{
        width: 500px;
        height: 500px;
    }
    .textbox{
        width: 300px;
        height: 200px;
        margin: 0 auto;
        border: 1px solid #cccccc;
        overflow: auto;
        resize: vertical;
    }
    //div无内容时
    .textbox:empty::before{
        content: attr(placeholder);
        color:red;
    }
    //div获得焦距
    .textbox:focus::before{
        content: none;
    }
</style>
    <div class="textbox" contenteditable="true" placeholder ="我在没人理我的时候显示出来" ></div>
    <textarea></textarea>
<body>
    <script>
       
    </script>
</body>
</html>