Không thể giảm chiều cao khi văn bản bị xóa trong một texarea động

Question

<div class="mainContainer"> 
    <div class="container"> 
    <div class="content"></div> 
    </div> 
    <div class="footerCls"> 
    <div class="inputcls"> 
     <textarea name="text" placeholder="Text goes here..." onkeydown="expand(event,this)" onkeyup="expand(event,this)"></textarea> 
     <div class="wc-commands" id="wc-commands"> 
     <svg xmlns="http://www.w3.org/2000/svg" width="22px" height="22px" viewBox="0 0 22 22" version="1.1"> 
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
      <g transform="translate(-263.000000, -18.000000)"> 
       <g> 
       <g transform="translate(264.000000, 19.000000)"> 
        <path d="M7.09,7 C7.57543688,5.62004444 8.98538362,4.79140632 10.4271763,5.0387121 C11.868969,5.28601788 12.9221794,6.53715293 12.92,8 C12.92,10 9.92,11 9.92,11" id="Shape" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> 
        <circle id="Oval-2" fill="#D2D2D2" cx="10" cy="15" r="1"></circle> 
        <circle id="Oval" stroke="#D2D2D2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" cx="10" cy="10" r="10"></circle> 
       </g> 
       </g> 
      </g> 
      </g> 
     </svg> 
     </div> 
     <div class="wc-send" id="wc-send"> 
     <svg xmlns="http://www.w3.org/2000/svg" width="24px" height="20px" viewBox="0 0 24 20" version="1.1"> 
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"> 
      <g transform="translate(-320.000000, -19.000000)" stroke="#FFFFFF" stroke-width="2"> 
       <g> 
       <g transform="translate(321.000000, 20.000000)"> 
        <polygon points="22 0 19 18 10 12 0 9"></polygon> 
        <path d="M9.5,11.5 L21.5,0.5"></path> 
        <polyline points="10 12 10 18 14 15"></polyline> 
       </g> 
       </g> 
      </g> 
      </g> 
     </svg> 
     </div> 
    </div> 
    </div> 
</div> 
<script> 
    function expand(e, element) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    var element2 = document.getElementsByClassName("footerCls")[0]; 
    if (code != 13) { 
     if (element.scrollHeight < 84) { 
     element2.style.height = (element.scrollHeight) + "px"; 
     element.style.height = (element.scrollHeight) + "px"; 
     element.style.overflowY = "hidden"; 
     } else { 
     element2.style.height = "125px"; 
     element.style.height = "84px"; 
     element.style.overflowY = "scroll"; 
     } 
    } else { 
     element2.style.height = "56px"; 
     element.style.height = "30px"; 
     element.value = ""; 
     element.style.overflowY = "hidden"; 
    } 
    } 

</script> 

Tôi đã viết văn bản ở nơi nó tăng khi nhập văn bản được thêm vào. Nó sẽ đạt đến một chiều cao nhất định (cho đến 4 hàng) và sau đó cuộn xuất hiện. Tôi không thể giảm chiều cao khi văn bản bị xóa.

Ngoài ra, tôi không thể đặt văn bản dòng đơn theo mặc định.

Fiddle

Dưới đây là hình ảnh mà tôi đang cố gắng để đạt

Answer 1

Để đạt được điều đó một cách dễ dàng nhất mà bạn nên thực hiện một số thay đổi nhỏ

1. Cởi position: absolute; từ .inputcls và .inputcls textarea. Bằng cách này, trình bao bọc của chúng sẽ được điều chỉnh tự động khi thay đổi textarea và bạn sẽ không phải thực hiện theo mã.

2. Thay vì đặt chiều cao tối thiểu textarea bằng pixel sử dụng thuộc tính rows để đặt số hàng tối thiểu mà bạn muốn.

   <textarea rows="2"></textarea> 
   

3. Khi văn bản thay đổi đặt chiều cao thành auto. Nó sẽ điều chỉnh chiều cao textarea về chiều cao ban đầu cần có. Sau đó, bạn có thể nhận được scrollHeight và đặt lại. Vì vậy, thực tế chức năng của bạn chỉ đơn giản nên là:

   function expand(e, element) { 
       element.style.height = "auto"; 
   
       if (element.scrollHeight <= 84) { 
        element.style.height = element.scrollHeight + "px"; 
        element.style.overflowY = "hidden"; 
       } else { 
        element.style.height = "84px"; 
        element.style.overflowY = "scroll"; 
       } 
   } 
   

Xem updated JSFiddle

BTW

Bạn đã viết:

Ngoài ra, tôi không thể để thiết lập đơn văn bản dòng theo mặc định.

Với giải pháp này chỉ cần thay đổi rows="2" để rows="1"

BTW2

bạn không cần phải sử dụng cả hai onkeydown và onkeyup. Chỉ sử dụng onkeyup sẽ tốt hơn.

Answer 2

Bạn sẽ cần phải thực hiện dưới sự thay đổi:

<script> 
    function expand(e, element) { 
    var code = (e.keyCode ? e.keyCode : e.which); 
    var element2 = document.getElementsByClassName("footerCls")[0]; 
    if (code != 13) { 
     if (element.scrollHeight < 84) { 
     element2.style.height = (element.scrollHeight) + "px"; 
     element.style.height = (element.scrollHeight) + "px"; 
     element.style.overflowY = "hidden"; 
     } else { 
     element2.style.height = "125px"; 
     **element.style.height = "84px";** 
     element.style.overflowY = "scroll"; 
     } 
    } else { 
     element2.style.height = "56px"; 
     element.style.height = "30px"; 
     element.value = ""; 
     element.style.overflowY = "hidden"; 
    } 
    } 

</script> 

từ:

element.style.height = "84px"; 

để

element.style.maxHeight = "84px"; 

Answer 3

Dường như tất cả những gì bạn cần làm là thay đổi min-height: 56px trên lớp footerCls của bạn thành một thứ như ví dụ: min-height: 100px dường như hiển thị nhiều phần tử hơn.