zoukankan      html  css  js  c++  java
  • 关于textarea自适应高度

    一、css方式(随内容的变化自适应高度,加载时告诉不固定。))

    <style>
    .test_box {
    100px;
    _height: 20px;
    margin-left: auto;
    margin-right: auto;
    padding: 3px;
    outline: 0;
    border: 1px solid #a0b3d6;
    font-size: 12px;
    word-wrap: break-word;
    overflow-x: hidden;
    overflow-y: auto;
    /*_overflow-y: visible;*/
    }
    </style>

    <div style="border:1px solid #ccc;200px;word-wrap: break-word;" contenteditable="true">qewe
    fda
    fasdg
    gasd
    gsag
    </div>
    <div class="test_box" contenteditable="true">
    wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww111
    </div>

    二、js方式(加载时高度一定,双击后自适应高度)

    <title></title>
    <style>
    .textarea {
    /* 300px;*/
    border: 1px solid #ccc;
    overflow: hidden;
    resize: none;
    }
    </style>
    <script src="JS_file/jquery-1.7.2.min.js"></script>

    <textarea class="textarea">
    电视广告过过过过过过过过过过过过过过过过过过过过过 onfocus='textarea.style.posHeight=this.scrollHeight'

    电视广告过过过过过过过过过过过过过过过过过过过过过
    </textarea>

    <script type="text/javascript">
    $(".textarea").dblclick(function () {
    $(this).css("height", this.scrollHeight);
    });
    </script>

  • 相关阅读:
    Netty 超时机制及心跳程序实现
    ZJUTACM
    寻找素数对
    HDU 1021 Fibonacci Again
    HDU 1019 Least Common Multiple
    HDU 1017 A Mathematical Curiosity
    HDU 1014 Uniform Generator
    HDU 1013 Digital Roots
    HDU 1008 Elevator
    Educational Codeforces Round 2 B. Queries about less or equal elements
  • 原文地址:https://www.cnblogs.com/suan1717/p/6932688.html
Copyright © 2011-2022 走看看