div模拟textarea文本域及高度自适应
2016-09-13 10:41
295 查看
使用很简单,一个普通的block元素上加个contenteditable="true"就ok了,如下:
<div class="test_box" contenteditable="true" style="-webkit-user-select:text"><br /></div>
.test_box {
width: 400px;
min-height: 120px;
max-height: 300px;}
出现的问题和解决方案:
1.ios文字无法输入,添加style="-webkit-user-select:text",如果引用了fastclick.js文件,需要给div加上needsclick的class,例如<div
class="needsclick">不然也无法输入。
2.如果只想输入纯文本,使用:-webkit-user-modify: read-write-plaintext-only。
3.ios发现换行光标不移动,与mui.css冲突,添加*{-webkit-user-select:auto;}
4、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是没有虚框显示的,此迹象会暴露出div是个冒牌货,所以,需要添加下面的样式:outline:0;
5、 Firefox浏览器下可编辑模式的div如果内部元素是空空的,那么其在获取焦点是时候,光标不可见或是与外部div齐高,这也是会暴露出自己是textarea冒牌货的,所以,默认情况下,我们可以在此div中增加一个孤单的<br />换行标签。但是,IE8下,如果有个默认的br标签,光标位置可能会在第二行闪来闪去,所以,IE8下可编辑div里面默认
4000
是不能有br标签的,这个嘛,您自己想办法清掉吧。
6、 IE浏览器下(IE6~8),输入文字回车的时候,div内部是会自动产生p标签包含每行元素的,而其他浏览器貌似是产生br标签(这里尚未全部测试,如有不准,欢迎指正)。由于默认的p标签是有1em大小的上下margin值的,为了效果统一,我们可以设置诸如下面的样式清除p标签的margin值:.test_box p{ margin: 0; }
7、可编辑模式的div输入的内容都会是很正宗的HTML代码,如果作为内容提交的话需要进行HTML字符过滤。还有,如果您是从其他页面上拷贝一段内容过来,然后粘贴到可编辑模式下的div中,会连HTML也完整的复制过来的(不同于textarea),所以,这里也有必要进行HTML字符过滤(例如web QQ)。
8、 IE6浏览器不支持max-height属性,所以,只用CSS是无法实现超过一定高度出现滚动条的效果,需要js配合实现。
9、 可编辑模式的div标签与textarea一样,是支持focus, blur事件的。自然也支持focus伪类,demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。
10.脚本控制自动获取焦点:
<div class="test_box" contenteditable="true" style="-webkit-user-select:text"><br /></div>
.test_box {
width: 400px;
min-height: 120px;
max-height: 300px;}
出现的问题和解决方案:
1.ios文字无法输入,添加style="-webkit-user-select:text",如果引用了fastclick.js文件,需要给div加上needsclick的class,例如<div
class="needsclick">不然也无法输入。
2.如果只想输入纯文本,使用:-webkit-user-modify: read-write-plaintext-only。
3.ios发现换行光标不移动,与mui.css冲突,添加*{-webkit-user-select:auto;}
4、 现代浏览器如Firefox在可编辑模式下的div获取焦点的时候会有虚框,而实际上textarea是没有虚框显示的,此迹象会暴露出div是个冒牌货,所以,需要添加下面的样式:outline:0;
5、 Firefox浏览器下可编辑模式的div如果内部元素是空空的,那么其在获取焦点是时候,光标不可见或是与外部div齐高,这也是会暴露出自己是textarea冒牌货的,所以,默认情况下,我们可以在此div中增加一个孤单的<br />换行标签。但是,IE8下,如果有个默认的br标签,光标位置可能会在第二行闪来闪去,所以,IE8下可编辑div里面默认
4000
是不能有br标签的,这个嘛,您自己想办法清掉吧。
6、 IE浏览器下(IE6~8),输入文字回车的时候,div内部是会自动产生p标签包含每行元素的,而其他浏览器貌似是产生br标签(这里尚未全部测试,如有不准,欢迎指正)。由于默认的p标签是有1em大小的上下margin值的,为了效果统一,我们可以设置诸如下面的样式清除p标签的margin值:.test_box p{ margin: 0; }
7、可编辑模式的div输入的内容都会是很正宗的HTML代码,如果作为内容提交的话需要进行HTML字符过滤。还有,如果您是从其他页面上拷贝一段内容过来,然后粘贴到可编辑模式下的div中,会连HTML也完整的复制过来的(不同于textarea),所以,这里也有必要进行HTML字符过滤(例如web QQ)。
8、 IE6浏览器不支持max-height属性,所以,只用CSS是无法实现超过一定高度出现滚动条的效果,需要js配合实现。
9、 可编辑模式的div标签与textarea一样,是支持focus, blur事件的。自然也支持focus伪类,demo页面中Firefox等现代浏览器获取焦点时的外发光就是使用的:focus。
10.脚本控制自动获取焦点:
var editor = document.getElementById('#div'); editor.onfocus = function () { window.setTimeout(function () { var sel,range; if (window.getSelection && document.createRange) { range = document.createRange(); range.selectNodeContents(editor); range.collapse(true); range.setEnd(editor, editor.childNodes.length); range.setStart(editor, editor.childNodes.length); sel = window.getSelection(); sel.removeAllRanges(); sel.addRange(range); } else if (document.body.createTextRange) { range = document.body.createTextRange(); range.moveToElementText(editor); range.collapse(true); range.select(); } }, 1); } editor.focus()
相关文章推荐
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
- 用DIV+CSS模拟textarea,实现文本框高度自适应用户输入的文本
- div模拟textarea以css控制最大高度和最小高度实现高度自适应实例页面
- div模拟textarea以实现高度自适应实例页面
- div模拟textarea以实现高度自适应实例页面
- div 模拟text area 高度自适应,不要滚动条
- 上下div高度动态自适应--另类处理方案
- 跨浏览器下,关于Div高度自适应(二)
- 让DIV高度自适应
- div高度自适应填充剩余部分
- div+css 左右两列高度自适应以及父级div也跟着自适应子级的高度
- 一个DIV中, 多个子DIV高度统一自适应
- div高度自适应
- 关于CSS中的float和position (父容器div内的子元素div为float时,父元素无法撑开(或高度自适应)的解决方式)
- 左右两个div高度自适应
- IE7、FF DIV高度不能自适应问题的解决方案
- jquery实现div自适应浏览器高度(宽度)
- web 解决在父级div填充子div,父div高度自适应问题
- div自适应宽度和高度实现
- div 自适应高度 自动填充剩余高度