使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
2024-08-26 14:09:00
一、使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题。
HTML5中添加了一个新属性contenteditable,该属性可以让input,textarea以外的不可编辑的标签具备可编辑功能;
用法如下:
//contenteditable="true" 当属性值为true的时候,可编辑标签内可以写入标签,对于复制的具有样式的内容,其样式会保留;
<div contenteditable="true">我是可编辑的富文本框</div> //contenteditable="plaintext-only" 当属性值为plaintext-only时,该可编辑标签内只能写入纯文本的数据,对于复制的具有样式的内容,会转换为纯文本,而将样式标签等内容过滤掉;
<div contenteditable="plaintext-only"></div>
二、如果不使用该属性,可以使用js控制textarea的高度;原理是当textarea出现滚动条时,增加其高度,使滚动条消失。
怎样判断是否出现滚动条,其方法是但元素的scrollHeight大于offsetHeight的时候,即出现了滚动条;
实现方法如下:
//html
<textarea id="text"></textarea> //css
#text{
font-size: 20px;
overflow: hidden; //必须
} //js
$('#text').on('input',function(){
if(text.scrollHeight>text.offsetHeight){
THeight += 20; //font-size的大小是20,因此每次给textarea的高度增加20px
$('#text').css('height',THeight);
}
})
最新文章
- BZOJ2506: calc
- jQuery获取多种input值的方法
- Linux学习笔记(20) Linux系统管理
- 链表操作----将单链表向右旋转 K 个位置
- LCD驱动(FrameBuffer)实例开发讲解
- QQ 国际版(International version) - 关闭弹出资讯
- 安装gstreamer
- C#中的foreach语句与枚举器接口(IEnumerator)及其泛型 相关问题
- Activity的setContentView的流程
- Django数据模型——通用字段选项
- Java基础 -- 嵌套类(非静态嵌套类、静态嵌套类)
- position:fixed固定定位的用法
- zprofiler三板斧解决cpu占用率过高问题(转载)
- Java中Annotation用法
- js 模拟css3 动画
- 【Python】一些零散的练习
- libsvm_readme[zz from github]
- 重复代码检查工具simian的基本用法
- iOS - UITableView 编辑(cell的插入, 删除, 移动)
- Autocomplete in ASP.NET MVC3自动检索并填充输入框