flex布局无法自动适应的bug以及实现textarea根据内容自适应

  -webkit-box布局无法自动适应高度的bug

  css3的新属性display:-webkit-box带来了前端开发自动适应布局的春天 ,但是我发现这个布局有个问题, 而且这个问题我无法解决;

  描述:如果flex布局内部某一个元素高度自动填高, 把一整个盒子高度顶开, 然后再把该元素的高度缩小,  flex盒子高度还是原来的高度, 高度没有改变, 必须手动重绘dom, 我勒个亲;

  

  DEMO如下:

  只要拉动textarea右下角的方块, 把文本输入框的高度拉高, 再拉小, 你就会看到flex布局无法自动适应的bug以及实现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'

上一篇:shutdown和close


下一篇:CSS 圣杯布局升级版---多个固定宽度一个自适应宽度