统一textarea在IE、Firefox下的效果

 

本文来自：http://blog.c1gstudio.com/archives/57

 

textarea在IE是默认有滚动条的，而FF没有滚动条的。解决方法:1、用textarea的宽度（widht）和高度（height）来定义textarea的大小；2、让滚动条自适应：overflow-y:auto。3、使用js来自适应高度

<style type="text/css">         #content {           font-size: 12px;           overflow:hidden;           background-color: #fff;           color: #000;           padding-right:5px;           padding-left:5px;           font-family: courier;           width:100px;           letter-spacing:0;           line-height:12px;           border-style:1px #ccc solid;         }       </style>       <script language="JavaScript">           function setRows() {           var textarea = document.getElementById("content");           var cols = textarea.cols;           var str = textarea.value;           // windows - replace /r/n           // mac - replace just /r           // linux - is just /n           str = str.replace(//r/n?/, "/n");           var lines = 2;           var chars = 0;           for (i = 0; i < str.length; i++) {             var c = str.charAt(i);             chars++;             if (c == "/n" || chars == cols) {               lines ++;               chars = 0;             }           }           textarea.setAttribute("rows", lines);           textarea.style.height = lines*12 + "px";         }         </script>       <span>test textarea</span><br>       <textarea id="content"  rows="2" cols="10" onkeyup="setRows();"></textarea>

当输入连续字符超出textarea宽度边界时，ie会自动换行，而FF会出现水平滚动条。解决方法:1、你可以设 overflow-x:hidden;将超出部分隐藏。2、使用js，但需考虑手动换行,中英文还有英文单词。