input和textarea的区别，以及用div模拟textarea

时间：2023-04-02 13:31:35 HTML

1.input和textareainput的区别：HTML元素用于为基于web的表单创建交互控件，以接受来自用户的数据。textarea:HTML元素表示多行纯文本编辑控件。<textareaname="textarea"rows="10"cols="50">Writesomethinghere区别：标签是成对的，以结束标签结束，标签的内容写在标签对的中间；<input>为单个标签，标签内容通过value属性设置；<textarea>的值为纯文本；<input>的值因类型而异；<textarea>没有类型属性；<input>有多种类型，满足表单与用户的数据交互；<textarea的值>可以是多行，有rows和cols来控制多行结构；<input>的值为单行；2、使用div模拟textarea标签步骤：给div添加一个HTML全局属性：contenteditable="true"，使div元素可被用户编辑；添加样式resize:vertical;到div，以便用户可以调整div的大小，注意：不要忘记设置overflow:auto；样式，因为调整大小样式不适用于溢出：可见；块，否则调整大小将不起作用；添加一个属性：placeholder="Iamplaceholder";通过CSS选择器获取并显示placeholder的值；直接添加代码：<divclass="textarea"contenteditable="true"placeholder="Thisisplaceholder"></div>.textarea{高度：200px；宽度：300px；填充：4px；边框：1px实心#888；调整大小：垂直；overflow:auto;}.textarea:empty:before{content:attr(placeholder);bbb;}作用：欢迎交流，欢迎交友</p> </div> </div> <div class="zuowen_sxy"> <div class="prev">上一篇：<a title="现代JS中的流控制：详解回调、Promises、Async-Await" href="/webqianduan/228433.html">现代JS中的流控制：详解回调、Promises、Async-Await</a> </div> <div class="prev">下一篇：<a title="CSS笔记（一）：CSS选择器" href="/webqianduan/228435.html">CSS笔记（一）：CSS选择器</a> </div> </div> <div class="related_about"> <div class="related_about_t"><code>input和textarea的区别，以及用div模拟textarea相关文章</code></div> <ul> <li><a href="/kejifunen/370679.html" target="_blank" title="腾讯集团副总裁程武！用科技和文化支撑公益梦想">腾讯集团副总裁程武！用科技和文化支撑公益梦想</a></li> <li><a href="/kejifunen/370657.html" target="_blank" title="吐槽小米手环和Moto360魅族智能手表或将推出">吐槽小米手环和Moto360魅族智能手表或将推出</a></li> <li><a href="/kejifunen/370623.html" target="_blank" title="360第三代儿童卫士智能手表曝光！就为了老公和孩子吗？ ">360第三代儿童卫士智能手表曝光！就为了老公和孩子吗？ </a></li> <li><a href="/kejifunen/370616.html" target="_blank" title="我们来看看智能门锁行业的五大技术和十大厂商">我们来看看智能门锁行业的五大技术和十大厂商</a></li> <li><a href="/kejifunen/370612.html" target="_blank" title="德国发布儿童智能手表销售禁令，威胁隐私和安全">德国发布儿童智能手表销售禁令，威胁隐私和安全</a></li> <li><a href="/kejifunen/370563.html" target="_blank" title="暴风和乐视也负债累累！冯鑫如何走出泥潭？ ">暴风和乐视也负债累累！冯鑫如何走出泥潭？ </a></li> <li><a href="/kejifunen/370561.html" target="_blank" title="身体追踪是 VR 的灵魂，更具互动性和视觉冲击力">身体追踪是 VR 的灵魂，更具互动性和视觉冲击力</a></li> <li><a href="/kejifunen/370521.html" target="_blank" title="Maxim 发布首款可监测心电图、心率和体温的腕戴式平台 ">Maxim 发布首款可监测心电图、心率和体温的腕戴式平台 </a></li> <li><a href="/kejifunen/370498.html" target="_blank" title="详细讲解语音控制智能家居系统的实现流程和技术">详细讲解语音控制智能家居系统的实现流程和技术</a></li> <li><a href="/kejifunen/370488.html" target="_blank" title="虚拟现实可以照进现实和AR增强体验">虚拟现实可以照进现实和AR增强体验</a></li> <li><a href="/kejifunen/370456.html" target="_blank" title="AR和VR将如何重塑食品行业主要集中在三个方面">AR和VR将如何重塑食品行业主要集中在三个方面</a></li> <li><a href="/kejifunen/370428.html" target="_blank" title="手机厂商做VR！只有苹果和谷歌Daydream吗？ ">手机厂商做VR！只有苹果和谷歌Daydream吗？ </a></li> <li><a href="/kejifunen/370427.html" target="_blank" title="8K是未来，内容创作和生态建设迎来新概念">8K是未来，内容创作和生态建设迎来新概念</a></li> <li><a href="/kejifunen/370376.html" target="_blank" title="区块链技术和VR将如何改变音乐产业？（第1部分）">区块链技术和VR将如何改变音乐产业？（第1部分）</a></li> <li><a href="/kejifunen/370331.html" target="_blank" title="为什么需要两台机器来扫地和拖地？浦桑尼克LDS M6不仅仅可">为什么需要两台机器来扫地和拖地？浦桑尼克LDS M6不仅仅可</a></li> <li><a href="/kejifunen/370320.html" target="_blank" title="Microsoft Band 2 美国亚马逊圣诞特卖！和上一">Microsoft Band 2 美国亚马逊圣诞特卖！和上一</a></li> <li><a href="/kejifunen/370310.html" target="_blank" title="超越谷歌！云和AI撑起微软帝国，迈向万亿美元俱乐部">超越谷歌！云和AI撑起微软帝国，迈向万亿美元俱乐部</a></li> <li><a href="/kejifunen/370301.html" target="_blank" title="NATEDE智能净化器来了，它可以自动种植植物和浇水">NATEDE智能净化器来了，它可以自动种植植物和浇水</a></li> <li><a href="/kejifunen/370278.html" target="_blank" title="oTMS联合JDA发布中国消费者心声调查报告，新技术和客户体">oTMS联合JDA发布中国消费者心声调查报告，新技术和客户体</a></li> <li><a href="/kejifunen/370233.html" target="_blank" title="榨汁机实现品质和奢华，了解如何一步步选择榨汁机？ ">榨汁机实现品质和奢华，了解如何一步步选择榨汁机？ </a></li> </ul> </div> </div> <div class="main-right"> <div class="right_fix"> <div class="r_con"> <div class="r_title">最新推荐</div> <ul> <li><em>1</em><a href="/kejifunen/371273.html" title="苹果跨界！让VR和iPhone擦出火花" target="_blank">苹果跨界！让VR和iPhone擦出火花</a></li> <li><em>2</em><a href="/kejifunen/371268.html" title="石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料" target="_blank">石墨烯可以将普通纸张变成用于柔性显示器和可穿戴设备的新材料</a></li> <li><em>3</em><a href="/kejifunen/371208.html" title="当虚拟现实和3D技术走进战场，无需军官在场" target="_blank">当虚拟现实和3D技术走进战场，无需军官在场</a></li> <li><em>4</em><a href="/kejifunen/371125.html" title="PS5和PS5二代VR预计将于2020年发布" target="_blank">PS5和PS5二代VR预计将于2020年发布</a></li> <li><em>5</em><a href="/kejifunen/371118.html" title="三星曝20个新漏洞！黑客可以控制你家的摄像头和门锁" target="_blank">三星曝20个新漏洞！黑客可以控制你家的摄像头和门锁</a></li> <li><em>6</em><a href="/kejifunen/371095.html" title="蓝牙耳机和音箱无缝切换，不错过任何一个节拍" target="_blank">蓝牙耳机和音箱无缝切换，不错过任何一个节拍</a></li> <li><em>7</em><a href="/kejifunen/371093.html" title="新型可穿戴设备简化血糖监测和调节" target="_blank">新型可穿戴设备简化血糖监测和调节</a></li> <li><em>8</em><a href="/kejifunen/371064.html" title="Oculus 和 Valve！虚拟世界中的领域之战（第 2 " target="_blank">Oculus 和 Valve！虚拟世界中的领域之战（第 2 </a></li> <li><em>9</em><a href="/kejifunen/371045.html" title="智能手表和传统手表厂商是竞争对手还是朋友？ " target="_blank">智能手表和传统手表厂商是竞争对手还是朋友？ </a></li> <li><em>10</em><a href="/kejifunen/371020.html" title="Sennheiser 推出首款 Neckbuds 耳机！支持" target="_blank">Sennheiser 推出首款 Neckbuds 耳机！支持</a></li> </ul> </div> <div class="r_con"> <div class="r_title">猜你喜欢</div> <ul class="you_like"> <li><em>1</em><a href="/kejifunen/371013.html" title="亚马逊3C销售报告！可穿戴和游戏配件销量激增" target="_blank">亚马逊3C销售报告！可穿戴和游戏配件销量激增</a></li> <li><em>2</em><a href="/kejifunen/371009.html" title="想和安老师面对面交流吗？低价体验VR——暴风魔镜4初体验" target="_blank">想和安老师面对面交流吗？低价体验VR——暴风魔镜4初体验</a></li> <li><em>3</em><a href="/kejifunen/371001.html" title="阿里巴巴成立VR实验室，加紧VR内容培育和硬件研发" target="_blank">阿里巴巴成立VR实验室，加紧VR内容培育和硬件研发</a></li> <li><em>4</em><a href="/kejifunen/370997.html" title="瑞鹰ZigBee Light Link智能照明控制系统解决方" target="_blank">瑞鹰ZigBee Light Link智能照明控制系统解决方</a></li> <li><em>5</em><a href="/kejifunen/370973.html" title="医药市场规模达1.2万亿美元，会被大数据和可穿戴设备颠覆吗？" target="_blank">医药市场规模达1.2万亿美元，会被大数据和可穿戴设备颠覆吗？</a></li> <li><em>6</em><a href="/kejifunen/370965.html" title="TicPods 免费！ iPhone和Android用户的最" target="_blank">TicPods 免费！ iPhone和Android用户的最</a></li> <li><em>7</em><a href="/kejifunen/370952.html" title="联想Watch S和另外两款智能手表亮相，外观惊艳" target="_blank">联想Watch S和另外两款智能手表亮相，外观惊艳</a></li> <li><em>8</em><a href="/kejifunen/370951.html" title="运动能量集合！把你变成驱动可穿戴设备和物联网的动力源" target="_blank">运动能量集合！把你变成驱动可穿戴设备和物联网的动力源</a></li> <li><em>9</em><a href="/kejifunen/370932.html" title="富士胶片推出配备节省空间和可旋转镜头的新型紧凑型投影仪产品 " target="_blank">富士胶片推出配备节省空间和可旋转镜头的新型紧凑型投影仪产品 </a></li> <li><em>10</em><a href="/kejifunen/370878.html" title="阿尔卡特 OneTouch 手表！缺乏细节和亮点" target="_blank">阿尔卡特 OneTouch 手表！缺乏细节和亮点</a></li> <li><em>11</em><a href="/kejifunen/370867.html" title="谁和你一起跑步？最受网友欢迎的8款运动耳机" target="_blank">谁和你一起跑步？最受网友欢迎的8款运动耳机</a></li> <li><em>12</em><a href="/kejifunen/370855.html" title="预算1500元以内联想 Z5、小米X6 和荣耀8X 怎么选" target="_blank">预算1500元以内联想 Z5、小米X6 和荣耀8X 怎么选</a></li> <li><em>13</em><a href="/kejifunen/370824.html" title="VR和AR竞赛！谁是时代的转折点？ " target="_blank">VR和AR竞赛！谁是时代的转折点？ </a></li> <li><em>14</em><a href="/kejifunen/370817.html" title="重新思考可穿戴设备和数据利用！为什么这么难坚持" target="_blank">重新思考可穿戴设备和数据利用！为什么这么难坚持</a></li> <li><em>15</em><a href="/kejifunen/370813.html" title="【对比评测】小米和魅族耳机市场竞争！选择哪一边？ " target="_blank">【对比评测】小米和魅族耳机市场竞争！选择哪一边？ </a></li> <li><em>16</em><a href="/kejifunen/370773.html" title="阿里巴巴和盛大同时进军VR行业" target="_blank">阿里巴巴和盛大同时进军VR行业</a></li> <li><em>17</em><a href="/kejifunen/370770.html" title="可穿戴设备市场腾飞的关键！结构和功能的适配" target="_blank">可穿戴设备市场腾飞的关键！结构和功能的适配</a></li> <li><em>18</em><a href="/kejifunen/370736.html" title="微软、谷歌和苹果都是同质的！技术会实现大统一吗？ " target="_blank">微软、谷歌和苹果都是同质的！技术会实现大统一吗？ </a></li> <li><em>19</em><a href="/kejifunen/370730.html" title="当虚拟和现实失去界限时，虚拟现实会发生什么？ " target="_blank">当虚拟和现实失去界限时，虚拟现实会发生什么？ </a></li> <li><em>20</em><a href="/kejifunen/370710.html" title="三星Galaxy Watch智能手表体验！更长的续航和堪比机" target="_blank">三星Galaxy Watch智能手表体验！更长的续航和堪比机</a></li> </ul> </div> </div> </div> </div> <div class="related_article"></div> <div class="footer"> <p>Copyright © 2012-2022 程序源版权所有<a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">豫ICP备2022028201号</a></p> <p>重要申明：本站所有的文章、图片、评论等，均由网友发表或上传并维护或收集自网络，属个人行为，与本站立场无关。如果侵犯了您的权利，请与我们联系，我们将在24小时内进行处理、任何非本站因素导致的法律后果，本站均不负任何责任。</p> </div>   </body> </html>