今天真的有些无语,在百度上找了很多关于textarea和input高度自适应的代码,并且考虑到了要判断textarea的滚动条,从而动态改变它的高度,直到我搜索了这个让我目瞪狗呆的办法……

<div class="test_box" contenteditable="true"><br /></div>

看到这句话我感觉……It's all

简单的介绍一下contenteditable:规定是否可编辑元素的内容。

属性值:true:表示可编辑元素;

    false: 表示不可编辑元素;

    classname:继承父元素的contenteditable。

有了这个属性,可编辑的标签就不再是input和textarea了,p元素、div元素等等都是可以编辑的。

接下来我们只需要设置这个div的宽度和最小高度就能够实现自适应了。当然你要为div加一个border,避免我们找不到它。

这让我深深地感觉到了学以致用的重要性,以此共勉。

div仿textarea使高度自适应的更多相关文章

  1. div模拟textarea且高度自适应

    需求 我们知道文本超出 textarea 高度后,textarea 就会出现滚动条,需求就是让 textarea 高度跟随文本高度变化,屏蔽滚动条,原来做过用js去监听文本行数,然后改变文本框的高度, ...

  2. textarea下高度自适应

    1,背景:textarea的高度不会随内容的增加而自适应,会出现滚动条 解决方案: 1)使用div模拟textarea  使用h5的属性    <div contenteditable=&quo ...

  3. div模拟textarea实现高度自增长

    今天突然有位前端的朋友问我textarea怎么实现高度随内容自增长,我一下子懵了,首先想到的是用js改变textarea的高度,但是百度了很多参考代码效果都不是很理想. 因为之前实际项目中用的text ...

  4. DIV+CSS左右列高度自适应问题

    其实解决DIV+CSS左右两列高度自适应的方法就是要注意两点:一是在最外层加上overflow:hidden,然后在左边列加上margin-bottom:-9999px;padding-bottom: ...

  5. textarea实现高度自适应

    css部分 #textarea { display: block; margin:0 auto; overflow: hidden; width: 550px; font-size: 14px; he ...

  6. div仿textarea可输入

    原本要用textarea,但是后来发现好像只有IE支持textarea里边使用html标签,由于需要在textarea中显示一条横线(<hr />),在网上查了很久,都说textarea是 ...

  7. div仿textarea

    CSS代码: .test_box { width: 400px; min-height: 120px; max-height: 300px; _height: 120px; margin-left: ...

  8. DIV仿textarea文本域,contenteditable如何只能输入纯文本

    对于支持HTML5浏览器有2种方法: 1. HTML5 <div contenteditable="plaintext-only"></div> 2.  C ...

  9. 使用contenteditable+div模拟textarea文本域实现高度自适应

    使用contenteditable+div模拟textarea文本域实现高度自适应 开发过程中由于需要在发送消息的时候需要有一个可以高度自适应的文本域,一开始是使用textarea并搭配auto-si ...

随机推荐

  1. Atitit.你这些项目不都是模板吗?不是原创  集成和整合的方式大总结

    Atitit.你这些项目不都是模板吗?不是原创  集成和整合的方式大总结 1.1. 乔布斯的名言:创新即整合(Creativity is just connecting things).1 1.2. ...

  2. 全网络最正确的让 Linux 开机进入字符界面的方法及设置 FrameBuffer 分辨率的方法

    引言 这个标题有点长,是为了在标题中就把问题说清楚,以便搜索引擎能够把有需要的朋友准确地带到我这里来.目前在网络上,很多关于 Linux 方面的知识是过时的和错误的.我标题中指出的两个知识点就是其中的 ...

  3. 自己写jquery插件之模版插件高级篇(一)

    需求场景 最近项目改版中,发现很多地方有这样一个操作(见下图gif动画演示),很多地方都有用到.这里不讨论它的用户体验怎么样. 仅仅是从复用的角度,如果每个页面都去写text和select元素,两个b ...

  4. ASP.NET MVC Model绑定(一)

    ASP.NET MVC Model绑定(一) 前言 ModelMetadata系列的结束了,从本篇开始就进入Model绑定部分了,这个系列阅读过后你会对Model绑定有个比较清楚的了解, 本篇对于Mo ...

  5. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  6. ABP源码分析四:Configuration

    核心模块的配置 Configuration是ABP中设计比较巧妙的地方.其通过AbpStartupConfiguration,Castle的依赖注入,Dictionary对象和扩展方法很巧妙的实现了配 ...

  7. Lamda表达式多个字段排序问题 ThenBy、ThenByDescending

    示例代码: //ThenBy - 在 OrderBy 或 OrderByDescending 的基础上再正序排序 //ThenByDescending - 在 OrderBy 或 OrderByDes ...

  8. .Net 面试题 3C(CTS,CLS,CLR)

    1.CTS(Common Type System)通用类型系统 CTS不但实现了COM的变量兼容类型,而且还定义了通过用户自定义类型的方式来进行类型扩展.任何以.NET平台作为目标的语言必须建立它的数 ...

  9. Atitit 图像处理类库大总结attilax qc20

    Atitit 图像处理类库大总结attilax qc20 1.1. 选择与组合不同的图像处理类库1 1.2. Halcon 貌似商业工具,功能强大.1 1.3. Openvc  Openvc功能也是比 ...

  10. js基本类型和引用类型

    先来两个例题 //1. var person; person.age=10; console.log(person.age) //undefined person是字符串而不是对象,没有属性 //2. ...