用div来模拟textarea的实现

最新推荐文章于 2024-05-07 19:36:34 发布
最新推荐文章于 2024-05-07 19:36:34 发布
阅读量224 收藏
点赞数
分类专栏： 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 1123
呼呼呼~ textarea: 为什么？你已经无所不在了，还想着代替我？ div:不好意思了，你在你的领域确实很强大，但是input不能换行，而你却一言不合就出现滚动条，你得知道，这有时候，很丑。 textarea: 其实我是可以高度适应的，you look <style> textarea { padding: 0; } </style> <body> <textarea name="" id="area" cols="34"
通过div模拟textarea对数据进行编辑及可插入标签
niu_maBoy的博客
07-16 847
下面就是简单的对样式的一些处理，我使用的scss，大家可以改为其他的预处理语言。进行匹配，我这里有个bug就是对标签进行删除时发生的bug，希望有大神可以帮忙完善下。
使用 div 实现 input、textarea 输入框，并支持 placeholder 属性（解决浏览器兼容问题）
最新发布
2401_84094908的博客
05-07 704
# 使用 contenteditable=“true” 实现的文本框全选内容# 输入框贴贴去除样式并插入到指定光标位置（contenteditable=“true” 实现的输入框也支持）一、 实现 1、给 添加 属性，使 元素变成用户可编辑。2、给 添加 样式，使 可以被用户调整尺寸，注意：同时需要设置 样式，因为 样式不适用于 的块，不然 不会生效，。 支持输入框拉伸的属性：、、3、增加一个 属性，通过 控制显示。二、 实现 1、给 添加 属性，使 元素变成用户可编辑。2、给
如何用div来实现textarea文本框
Dimuzero的博客
11-17 1279
如何用div来实现textarea文本框 1. textarea样式 1.1可以输入文本 2.选中时会有黑色outline框 3.大小可控可调 2.用div实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
div模拟textarea的实现
weixin_43828487的博客
06-07 123
div模拟textarea的实现： html有个全局的属性：contenteditable 规定当前元素是否可编辑
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 2026
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
用div实现textarea
weixin_46021847的博客
06-06 293
考察内容：HTML的contenteditable(设置可否编辑)属性。 一、简易版 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用div实现textarea</title> </head> <body> <div contenteditable="true">点击这里，可直接进行编辑。&l
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...
div模拟textarea文本域轻松实现高度自适应
柑橘乌云_
04-22 323
看效果可以看到div在获取焦点的时候，会有个黑色边框，如果想要去掉需要设置outline属性为none。需要注意这个div可以识别富文本需要注意安全问题，最好可以做html标签的过滤。这里提供一个平替方法 就是div+contenteditable属性。记录了四种实现textarea自适应的方法，希望可以帮助到敏娜。众所周知文本域不能做到随着内容自适应高度的。
用一个div模拟textarea的实现
小草莓的博客
04-19 194
使得盒子右下角可以自由拉伸 ，加上overflow:auto;这个属性 ，使得盒子变成可编辑状态。
div标签改写textarea,实现部分文本内容标红
weixin_57246557的博客
01-16 924
【代码】div标签改写textarea,实现部分文本内容标红。
【HTML】使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
qq_45677671的博客
07-05 3421
使用 div 自定义实现 input、textarea 输入框（适合定制化场景）
html用div模拟文本框,如何使用div模拟实现textarea？
weixin_35062801的博客
06-08 1653
我们都知道textarea是form表单中一个很常见的元素，用于多行文本输入，可以设置行数和列数。但是默认的textarea样式在页面上看起来是很丑的，很多页面都是采用div模拟textarea实现。例如QQ空间主页面的发表说说，在你看页面源码后就会发现这个输入框其实是一个div元素，并不是一个textarea元素，现在我们就来看看这是如何实现的吧？首先来看看实现的效果是什么样的。实现效果关键属性...
Bootstrap 按钮（实例 ）
2401_84093443的博客
05-04 714
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
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、付费专栏及课程。

余额充值