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 >11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</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'



分享给朋友:
您可能感兴趣的文章:
随机阅读: