使用很简单,一个普通的block元素上加个contenteditable="true"就ok了,如下:
<div contenteditable="true"></div>
true外面的引号甚至去掉都没关系。
contenteditable属性虽是HTML5里面的内容,但是IE似乎老早就支持此标签属性了。所以,兼容性方面还是不用太担心的。
ok,最麻烦的模拟textarea的可编辑效果已经解决了,现在想要使用div实现高度自适应那就像是给花花草草松松土一样容易的。使用min- height属性基本上就一步到位了,考虑到IE6浏览器对min/max家族不屑一顾,结合其内部元素溢出会撑开父标签高宽的特性,IE6浏览器直接定高就可以了。
代码
CSS代码:
.test_box {
width: 400px;
min-height: 120px;
max-height: 300px;
_height: 120px;
margin-left: auto;
margin-right: auto;
padding: 3px;
outline: 0;
border: 1px solid #a0b3d6;
font-size: 12px;
word-wrap: break-word;
overflow-x: hidden;
overflow-y: auto;
}
HTML代码:
<div class="test_box" contenteditable="true"><br /></div>
分享到:
相关推荐
解决textarea文字太多无法高度自适应问题,使用div模拟textarea
Vue自定义组件实现文本框根据文本内容自适应高度的效果,解决若输入文本量或显示文本量超过指定行数后,会出现垂直滚动条,但在IE环境下,该滚动条是隐藏的问题。
jquery----TextArea高度自适应
然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应。textarea总是很自信地显摆它的滚动条,高度固执地岿然不动。所以,有时候,为了增加交互体验想让文本域高度自适应的时候,就会遇到麻烦...
textarea高度自适应的jquery插件
自已写了一个可根据内容 自动调整高度的TEXTAREA ,
textarea根据内容自适应高度 组件 注意:要监听input事件改变value值 使用: <autoheight_textarea value="{{value}}" placeholder="写个评论" bindinput="listenerinput"></autoheight_textarea>
基于Vue的高度自适应文本输入框 Use Setup (开始) Install auto-textarea (安装) $ npm install auto-textarea --save package.json "auto-textarea": "^1.3.6" Use (如何引入) // 方法一 // import with ES6 ...
这是一个令textarea高度自适应的插件,使用jquery 去掉令人非常讨厌的滚动条;
NULL 博文链接:https://xiaojin21cen.iteye.com/blog/1560814
之前给大家分享过用Javascript控制文本框textarea高度随内容自适应增长收缩,今天花了点时间换了种实现方法,总结一下 代码如下: jQuery.fn.extend({ autoHeight: function(){ return this.each(function(){ ...
本文主要介绍了div实现自适应高度的textarea,实现angular双向绑定的方法。具有一定的参考价值,下面跟着小编一起来看下吧
使用JAVASCRIPT控制Textarea内容自适应高度,实施起来很简单,很平滑。
枫芸志 » 文本框textarea高度自适应增长/伸缩 textarea { height:100px; width: 300px; } 晴枫制作 http://jb51.net [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 方案一在各浏览器中,文本框随内容自适应...
里面包含了两个javascript方法,一个是判断终端类型的,根据userAgent判断访问网页的是什么类型的终端 第二个方法,是使textarea根据内容的多少,自动设置相应的高度,使文字不被隐藏
textarea 自适应大小 兼容Chrome ie等浏览器,自动调整大小
用css控制textarea文本域的高度随内容的变化而变化,不出现滚动条....首先,原则上实现textarea自适应必须适用css,不能直接适用“width=100%”这样的写法,具体示例: 复制代码代码如下: <style> textarea {
本文给大家分享的是Jquery实现textarea根据文本内容自适应高度,这些在平时的项目中挺实用的,所以抽空封装了一个文本框根据输入内容自适应高度的插件,这里推荐给小伙伴们。