zoukankan      html  css  js  c++  java
  • textarea 无边框无滚动条自适应高度的实现(转)

    http://blog.csdn.net/junval/archive/2007/08/29/1763541.aspx

    代码

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

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

    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>textarea 无边框无滚动条自适应高度的实现</title>
        <style type="text/css">...
            .info {...}{
              font-size: 12px;
              overflow:hidden;
              background-color: #ffffcc;
              color: black;
              100%;
              line-height:12px;
              padding-right:5px;
              padding-left:5px;
              font-family: courier;
              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'>可以根据内容自适应调整高度</textarea>
        </div>
        </form>
    </body>
    </html>

  • 相关阅读:
    实验axios用户登录及token验证
    vue的路由跳转了,可是页面没有变化
    搞清楚cookie,session,token,JWT
    APP应用测试流程
    Scrum敏捷开发
    APP项目环境及发布平台
    ssh -T git@github.com ssh: connect to host github.com port 22: Connection timed out
    pytest与unitest区别
    数据库三大范式--大白话
    docker 安装mysql挂载/var/lib/mysql目录时启动就退出
  • 原文地址:https://www.cnblogs.com/Hdsome/p/1348176.html
Copyright © 2011-2022 走看看