本文来自: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,但需考虑手动换行,中英文还有英文单词。