用div来模拟textarea的实现

最新推荐文章于 2024-05-16 10:14:39 发布
最新推荐文章于 2024-05-16 10:14:39 发布
阅读量223 收藏
点赞数
分类专栏： css常见问题 css小例子 文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41970780/article/details/110400586
版权
本文介绍如何使用HTML和CSS来创建一个类似textarea的功能，通过div元素实现文本输入和换行效果。
摘要由CSDN通过智能技术生成

用div来模拟textarea的实现

<style>
div{
   
    width: 400px;
    min-height: 100px;
        max-height: 300px;
     _height: 100px; //IE6
    margin-left: auto
最低0.47元/天 解锁文章
小怪兽学前端
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
DIV 模拟 textarea
FOR 的博客
07-20 1117
呼呼呼~ textarea: 为什么？你已经无所不在了，还想着代替我？ div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。 textarea: 其实我是可以高度适应的，you look <style> textarea { padding: 0; } </style> <body> <textarea name="" id="area" cols="34"
用div实现textarea
weixin_46021847的博客
06-06 288
考察内容：HTML的contenteditable(设置可否编辑)属性。 一、简易版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用div实现textarea</title> </head> <body> <div contenteditable="true">点击这里，可直接进行编辑。&l
通过div模拟textarea对数据进行编辑及可插入标签
niu_maBoy的博客
07-16 833
下面就是简单的对样式的一些处理，我使用的scss，大家可以改为其他的预处理语言。进行匹配，我这里有个bug就是对标签进行删除时发生的bug，希望有大神可以帮忙完善下。
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
最新发布
2401_84152177的博客
05-16 470
你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！**](https://bbs.csdn.net/topics/618191877)可以被用户调整尺寸，注意：同时需要设置。元素变成用户可编辑。元素变成用户可编辑。
div模拟textarea文本域轻松实现高度自适应
zibinghy
03-30 1369
<br />by zhangxinxu from http://www.zhangxinxu.com<br />本文地址： http://www.zhangxinxu.com/wordpress/?p=1362一、关于textarea文本域以及高度自适应<br />textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框：<br /><br />作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个
div标签改写textarea,实现部分文本内容标红
weixin_57246557的博客
01-16 872
【代码】div标签改写textarea,实现部分文本内容标红。
angularjs使用div模拟textarea文本框的方法
12-29
* div模拟textarea输入框双向数据绑定指令 */ .directive('contenteditable', [function() { return { require: 'ngModel', link: function(scope, element, attrs, ctrl) { //view -> m
div模拟textarea文本域实现高度自适应效果代码
11-21
textarea标签为表单元素，一般用在多行文字的输入。在web应用上常见的是评论输入框，微博信息输入框等。例如企鹅微博的输入框： 作为多行文本域功能来讲，textarea满足了我们大部分的需求。然而，textarea有一个不足...
div实现自适应高度的textarea实现angular双向绑定
01-19
相信不少同学模拟过腾讯的QQ做一个聊天应用，至少我是其中一个。 过程中我遇到的一个问题就是QQ输入框，自适应高度，最高高度为3row。 如果你也像我一样打算使用textarea，那么很抱歉，你一开始就错了。 textarea...
【HTML】使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
qq_45677671的博客
07-05 3363
使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
html用div模拟文本框,如何使用div模拟实现textarea？
weixin_35062801的博客
06-08 1647
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？首先来看看实现的效果是什么样的。实现效果关键属性...
div模拟textarea，解决高度自适应
11-28
解决textarea文字太多无法高度自适应问题，使用div模拟textarea
div自定义textArea输入框
shutong
01-13 734
<!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...
[随笔一记]让一个div盒子变成textarea
Tian_randai的博客
11-05 290
主要的属性就是contenteditable这个属性，contentedit的意思是内容编辑，后面+able，就是内容可编辑的。如果想自由拉伸的话，我们则还需要设置resize和overflow属性。但如果只设置了resize是没有用的，得搭配上overflow：auto。将resize设置成both，我们就可以上下和左右自适应拉伸。这样这个div就变成了一个合格的textarea了！然后再给盒子加上点属性，就可以在里面编辑内容啦。在浏览器中显示的效果如下。在浏览器中的效果就是如下。
div模拟实现textarea效果
liya_nan的博客
08-16 3465
效果展示： 代码实现： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;div实现textarea效果&lt;/title&gt; &lt;style&gt; #textarea { height: 200px; width: 300px; ...
[html] 用一个div模拟textarea的实现
歌谣的博客
03-12 320
[html] 用一个div模拟textarea的实现 上面的代码实现了div变为可编辑状态,但是textarea标签可以在右下角自由拉伸 <div class="edit" contenteditable="true" style="resize: both"></div> 这样就可以啦 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端面试题 ...
如何用div模仿textarea
smileboyjian的博客
07-19 2217
//h5新属性,让元素可以编写 <div contenteditable="true">     .....此处省略..... 给div设置css  主要属性有 div{     width: 100px;     min-height: 100px;         max-height: 300px;     padding: 3px
div模拟textarea文本域实现高度自适应
slqt_6688的博客
07-27 3222
看完张鑫旭的关于“div模拟textarea文本域轻松实现高度自适应”这篇文章，我自己来总结一下： 一、textarea表单元素： 一般用于评论和留言框的实现，我们可以设置它的cols和rows值来限制它的看见区域和可见行数，不过更好的办法是使用 CSS 的 height 和 width 属性来设置textarea的高度和宽度。请看下面例子： &lt;textarea name="name...
div模拟textarea
05-26
可以使用contenteditable属性来实现div模拟textarea的效果，代码如下： ``` <div contenteditable="true"></div> ``` 通过设置contenteditable属性为true，使得该div可以被编辑，从而模拟出textarea的效果。需要...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小怪兽学前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值