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>

  • 相关阅读:
    hw笔试题-01
    tcp
    linux schedule
    arm架构学习
    skyeye
    RTOS
    systemdump相关
    sdio
    linux kernel 多线程
    linux内核同步
  • 原文地址:https://www.cnblogs.com/suan1717/p/6932688.html
Copyright © 2011-2022 走看看