投递文章投递文章 投稿指南 RSS订阅RSS订阅

统一textarea在IE、Firefox、谷歌浏览器下的效果

来源:iT堂整理 发布时间:2009-05-25 收藏 投稿 字体:【

textarea在IE是默认有滚动条的,而FireFox和谷歌浏览器(Google Chrome)下没有滚动条的。

解决方法:
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.         function setRows() {
  18.           var textarea = document.getElementById("content");
  19.           var cols = textarea.cols;
  20.           var str = textarea.value;
  21.           // windows - replace \r\n
  22.           // mac - replace just \r
  23.           // linux - is just \n
  24.           str = str.replace(/\r\n?/, "\n");
  25.           var lines = 2;
  26.           var chars = 0;
  27.           for (i = 0; i < str.length; i++) {
  28.             var c = str.charAt(i);
  29.             chars++;
  30.             if (c == "\n" || chars == cols) {
  31.               lines ++;
  32.               chars = 0;
  33.             }
  34.           }
  35.           textarea.setAttribute("rows", lines);
  36.           textarea.style.height = lines*12 + "px";
  37.         }
  38.       </script>
  39.       <span>test textarea</span><br>
  40.       <textarea id="content"  rows="2" cols="10" onkeyup="setRows();"></textarea>

当输入连续字符超出textarea宽度边界时,ie会自动换行,而FF会出现水平滚动条。


解决方法:
1、你可以设 overflow-x:hidden;将超出部分隐藏。
2、使用js,但需考虑手动换行,中英文还有英文单词。

顶一下
(2)
22.2%
踩一下
(7)
77.8%
本文Tags:
  • 表情:
  •    
  • 评价:
用户名: 密码: 匿名 注册
最新评论 查看所有评论
About iTtang - 联系我们  - 专题列表 - 友情链接  -  高级搜索  -  帮助中心  -  您的意见