flex布局无法自动适应的bug以及实现textarea根据内容自适应
-webkit-box布局无法自动适应高度的bug
css3的新属性display：-webkit-box带来了前端开发自动适应布局的春天 ，但是我发现这个布局有个问题， 而且这个问题我无法解决；
描述：如果flex布局内部某一个元素高度自动填高， 把一整个盒子高度顶开， 然后再把该元素的高度缩小， flex盒子高度还是原来的高度， 高度没有改变， 必须手动重绘dom， 我勒个亲；
DEMO如下：
只要拉动textarea右下角的方块， 把文本输入框的高度拉高， 再拉小， 你就会看到
这个现象
<!DOCTYPE html>
<html>
<head> </head>
<body>
<style>
*{
margin:0;
padding:0;
}
.flex{
display:-webkit-box;display:-moz-box; -webkit-box-orient: horizontal;
border:1px solid #A7A7A7;
}
.flex .left, .flex .right{
display: -webkit-box;
display:-moz-box; }
textarea{
overflow:hidden;
}
</style>
<script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>
<div class="flex">
<div class="left">
<textarea >
</textarea>
</div>
<div class="right">
heheda
</div>
</div>
<script>
function autoHeight(elem) {
//这个有个要注意的地方就是， 要给height设置为auto；， 然后设置scrollHeight才有效;
elem.style.height = 'auto';
elem.scrollTop = 0;
elem.style.height = elem.scrollHeight + 'px';
}
var obj = document.getElementsByTagName("textarea")[0];
$(obj).on('keyup', function(){
autoHeight(this);
/*
var _this = this;
setTimeout(function() {
var temp = $(_this).closest(".flex");
$(temp).css("display","inline");
temp.append("<div class='temp'></div>")
temp.find(".temp").remove();
$(temp).css("display","-webkit-box");
},1000)
*/
});
</script>
</body>
</html>
以上DEMO的问题， 手动强制刷新DOM才能让盒子自动适应， 但是使用setTimeout无法解决， 这个demo在火狐浏览器中没有问题， 所以我归结为chrome的bug；
textarea自动适应
这是一个让textarea标签自动适应内部内容的DEMO，但是有个问题， 获取textarea的value 写入到div中会出现折行变成空格， 如果把textarea的内容放到pre标签中即可解决“换行变成空格”的问题， DEMO如下：
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<style>
*{
margin:0;
padding:0;
}
.flex{
display:-webkit-box;
display:-moz-box;
-webkit-box-orient: horizontal;
border:1px solid #A7A7A7;
}
.flex .left, .flex .right{
display: -webkit-box;
display:-moz-box;
}
textarea{
overflow:hidden;
resize:none;
}
.result{
margin:20px;
border:1px solid #FBA733;
}
</style>
<script src="http://libs.useso.com/js/jquery/1.8.3/jquery.js"></script>
<div class="flex">
<div class="left">
<textarea >11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</textarea>
</div>
<div class="right">
heheda
</div>
</div> <div class="result"> </div> <pre class="result"> </pre>
<script>
function autoHeight(elem) {
//这个有个要注意的地方就是， 要给height设置为auto；， 然后设置scrollHeight才有效;
elem.style.height = 'auto';
elem.scrollTop = 0;
elem.style.height = elem.scrollHeight + 'px';
}; var obj = document.getElementsByTagName("textarea")[0];
$(obj).on('keyup', function(){
autoHeight(this);
});
$(obj).on('input', function() {
$(".result").html( this.value );
});
$(function() {
$("textarea").keyup();
});
</script>
</body>
</html>
from==》》http://www.cnblogs.com/diligenceday/ 【 博客园 】keep real'
flex布局无法自动适应的bug以及实现textarea根据内容自适应的更多相关文章
- flex 布局占位符
flex 布局占位符 空 span bug .popover-custom-class .system-guide-container .buttons-box { display: flex; fl ...
- IE浏览器下flex布局的bug
原文地址:gitub上的Flexbugs list,可以看到Flex布局在IE糟糕表现的详细描述. 2. Column flex items set to align-items:center ove ...
- 解决flex布局下， elementui table组件不能跟随父组件的宽度而变化的bug
bug: 我在flex布局的元素中使用了elementui的table组件,饿了么的table上会被加一个动态的宽度, 当第一次改变flex元素宽度的时候.table的动态宽度会变化,第二次和以后就不 ...
- flex布局 justify-content：space-between; 解决最后一排数量不够自动向两端排列问题和flex布局的元素会有默认间隙（垂直间隙）
1 .flex 布局两端对齐当最后一排数量不够时,会出现以下布局情况 实现效果: 解决方案:使用after伪类, 解决最后一排数量不够两端分布的情况.宽度就是每张图片的宽度 .list:after { ...
- Flex布局【弹性布局】学习
先让我们看看在原来的学习中遇到的问题 之前在软件工程的大作业中,自己从零开始学习如何开发一个网站,从页面,到后台,当然数据库是大二的必修课 在学习如何编写一个静态页面的时候,完全是自学,自己摸索,所以 ...
- 神奇的Flex 布局
layout是css中的一个重点.传统的页面布局是盒子模型,依赖 display属性 ,position属性 , float属性.它对于那些特殊布局非常不方便,而且定位用多了会出现挺多的bug. 所以 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- flex布局使用方法简要汇总
近期因为使用inline-block,在项目部署后出现了一点小问题,几番解决未果,遂使用flex布局,于是借此机会对flex布局的用法做一个简要的汇总. 遇到的bug如下: 本想两个div使用inli ...
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
随机推荐
- Google类VR设备知识
前言 本文所指的google类vr设备是指: 谷歌的Cardboard.三星Gear VR.暴风魔镜等这样的手机VR盒子,而并不是HTC Vive这类. 人眼立体感知能力 人的左右眼看到的东西是有差别 ...
- 父元素与子元素之间的margin-top问题
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. html代码: <div c ...
- Eclipse tooltip变黑的修正
- luogu1003铺地毯[noip2011 提高组 Day1 T1]
题目描述 为了准备一个独特的颁奖典礼,组织者在会场的一片矩形区域(可看做是平面直角坐标系的第一象限)铺上一些矩形地毯.一共有 n 张地毯,编号从 1 到n .现在将这些地毯按照编号从小到大的顺序平行于 ...
- Oracle Delete inner的方式，级联删除子表的数据方式。
例子1: from table2 b where a.id=b.id) 例子2: rebatepolicy表是主表,rebatepolicyitems是从表,从表有主表的主键,现在对于主表一些条件的数 ...
- Linq学习笔记（转）
开始Linq前你要知道的 扩展方法 顾名思义就是对现有类进行扩展的的方法,扩展方法可以在不修改现有类的情况下,为现有类增加公共的接口(不是C#中的interface). 扩展方法本质上是一个静态方法, ...
- Java中run(), start(), join(), wait(), yield(), sleep()的使用
run(), start(), join(), yield(), sleep() 这些是多线程中常用到的方法. run(): 每个Thread中需要实现的方法, 如果直接调用的话, 会是和单线程一样的 ...
- BZOJ 1854 【Scoi2010】 游戏
Description lxhgww最近迷上了一款游戏,在游戏里,他拥有很多的装备,每种装备都有2个属性,这些属性的值用[1,10000]之间的数表示.当他使用某种装备时,他只能使用该装备的某一个属性 ...
- linux：手动校准系统时间和硬件CMOS时间
windows下OS时间和主板CMOS芯片里的时间通常是一致的,但是linux却不一定,在无法联网自动校准时间的情况下,只能手动调整: 查看系统时间 date 调整系统时间 sudo date -s ...
- Alpha版本测试报告
请根据团队项目中软件的需求文档.功能规格说明书和技术规格说明书,写出软件的测试计划.测试过程和测试结果,并回答下述问题. 1. 在测试过程中发现了多少Bug? 2. 你是怎么进行场景测试(scenar ...