flex布局无法自动适应的bug以及实现textarea根据内容自适应
2023-09-11 14:17:26 时间
-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'
相关文章
- 找bug记(1)
- cnblogs的编辑器BUG反馈:发布或编辑文章完成后,页面是卡死状态的
- 解决ThinkPHP3.2.3框架,PDO驱动类“抛出异常”不起作用的bug
- 疑似BUG:Python SGMLParser处理html中的javascript失当
- bug -- android 7.0 popwindow显示位置异常情况解决
- python日志滚动-修复按天滚动bug
- bug_ _java.lang.IllegalArgumentException: View not attached to window manager 2
- SQLServer · BUG分析 · Agent 链接泄露分析
- zooKeeper在weblogic下的bug
- Spire.Office For Net 7.7.2 fix bug
- BUG产生的原因那么多,这四个最常见!