textarea 無邊框無滾動條自適應(yīng)高度的實現(xiàn)

燮羽 2010-11-13

展開全文

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TextArea.aspx.cs" Inherits="TextArea" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www./1999/xhtml" >
<head runat="server">
    <title>textarea 無邊框無滾動條自適應(yīng)高度的實現(xiàn)</title>
    <style type="text/css">...
        .info {...}{
          font-size: 12px;
          overflow:hidden;
          background-color: #ffffcc;
          color: black;
          width:100%;
          line-height:12px;
          padding-right:5px;
          padding-left:5px;
          font-family: courier;
          width:100%;
          letter-spacing:0;
          border-style:none;
        }
    </style>
    <script language="javascript" type="text/javascript">
    function setRows(obj){
      var textarea = obj;
      var cols = textarea.cols;
      var str = textarea.value;
      str = str.replace(/ ?/, " ");
      var lines = textarea.rows;
      var chars = 0;
      for (i = 0; i < str.length; i++) {
        var c = str.charAt(i);
        chars++;
        if ( c == " ")
        {
           lines ++;
        }
        else
        {
           if (i > lines * (cols/2) )      //這里是中文模式除2 如果是輸入英文字符修改為1 即可
           {
              lines ++;
           }
        }
      }
     textarea.setAttribute("rows", lines);
     textarea.style.height = lines*12 + "px";
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <textarea id='LogC' onkeyup='setRows(this)' class='info' cols='75'rows='12'>可以根據(jù)內(nèi)容自適應(yīng)調(diào)整高度</textarea>
    </div>
    </form>
</body>
</html>