统一textarea在IE、Firefox下的效果

 

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

 

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

1. <style type="text/css">
2.         #content {
3.           font-size: 12px;
4.           overflow:hidden;
5.           background-color: #fff;
6.           color: #000;
7.           padding-right:5px;
8.           padding-left:5px;
9.           font-family: courier;
10.           width:100px;
11.           letter-spacing:0;
12.           line-height:12px;
13.           border-style:1px #ccc solid;
14.         }
15.       </style>
16.       <script language="JavaScript">
17.  
18.         function setRows() {
19.           var textarea = document.getElementById("content");
20.           var cols = textarea.cols;
21.           var str = textarea.value;
22.           // windows - replace /r/n
23.           // mac - replace just /r
24.           // linux - is just /n
25.           str = str.replace(//r/n?/, "/n");
26.           var lines = 2;
27.           var chars = 0;
28.           for (i = 0; i < str.length; i++) {
29.             var c = str.charAt(i);
30.             chars++;
31.             if (c == "/n" || chars == cols) {
32.               lines ++;
33.               chars = 0;
34.             }
35.           }
36.           textarea.setAttribute("rows", lines);
37.           textarea.style.height = lines*12 + "px";
38.         }
39.  
40.       </script>
41.       <span>test textarea</span><br>
42.       <textarea id="content"  rows="2" cols="10" onkeyup="setRows();"></textarea>

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