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

最新推荐文章于 2024-05-15 09:30:00 发布

center_long

最新推荐文章于 2024-05-15 09:30:00 发布

阅读量373

点赞数

文章标签： css html5

本文链接：https://blog.csdn.net/center_long/article/details/109724826

版权

区别：

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">

最低0.47元/天解锁文章

center_long

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
input和textarea的区别，及手写div模拟textarea

区别：textarea标签是成对的，有结束标签进行闭合，标签的内容写在标签对中间；input是单个标签，标签的内容通过 value属性设置；textarea的值是纯文本；input的值根据类型不同而不同；textarea没有type属性；input有多种type来满足表单与用户的数据交互；textarea的值可以是多行的，并且有rows和cols来控制多行结构；的值是单行的；模拟textarea在div上添加contenteditable="true"使div处于可编辑模式给div添加
复制链接

扫一扫