如何在使用JavaScript發送消息後修改textarea的設計？

我正在開發一個簡單的聊天應用程序，並且在發送消息表單中我有一個「growable」textarea和一個提交button。 textarea首先被設置爲固定高度，並且一旦用戶的消息開始比該高度更長，則文本區域開始變大。隨後繼續，直到生長的textarea的高度爲300px，然後出現滾動條。如何在使用JavaScript發送消息後修改textarea的設計？

問題是，當用戶發送一個長文本導致textarea增長，點擊發送按鈕後，文本區域將仍然在相同的增長高度，雖然我把它清空。

我試着在點擊按鈕後重置高度，但沒有幫助。

這裏是我的代碼：

TAgrow(document.querySelector('.js-grow')); 
 
function TAgrow(container) { 
 
    var area = container.querySelector('textarea'); 
 
    var clone = container.querySelector('span'); 
 
    area.addEventListener('input', function (e) { 
 
     clone.textContent = area.value; 
 
    }); 
 
} 
 

 

 
var messageForm = document.getElementsByClassName('message-form'); 
 
messageForm[0].addEventListener('submit', function (e) { 
 
    e.preventDefault(); 
 
    var messageContent = document.getElementsByTagName('textarea')[0].value; 
 

 
    postMessage(messageContent , function (res) { 
 
     var d = document.querySelector('.js-grow'); 
 
     d.querySelector('textarea').value = ''; 
 
     d.querySelector('textarea').setAttribute('height', 'calc(100% - 0.5625rem - 0.375rem)'); //my try 
 
     d.querySelector('span').value = ''; 
 
     d.querySelector('span').setAttribute('height', 'calc(100% - 0.5625rem - 0.375rem)'); //my try 
 
    }); 
 
});

.grow { 
 
     max-height: 300px; 
 
     overflow: hidden; 
 
     width:83%; 
 
     min-height: 4.28125rem ; 
 
     border-radius: 0.5625rem; 
 
     position: relative; 
 
     border-style: solid; 
 
     border-width: 1px; 
 
     border-color: #d7d7d7; 
 
     background-color: #ffffff; 
 
     left: 0.90625rem; right: 0.875rem; 
 
    } 
 
    .grow textarea, 
 
    .grow pre { 
 
     white-space: pre-wrap; 
 
     word-wrap: break-word; 
 
     font-family: Nunito; 
 
     color: #616161; 
 
     font-size: 0.9375rem;/* Approximation due to font substitution */ 
 
     font-weight: 400; 
 
     line-height: 1.25rem;/* Approximation due to font substitution */ 
 
     text-align: left; 
 
     width: calc(100% - 0.5625rem - 1.1875rem); 
 
     height: calc(100% - 0.5625rem - 0.375rem); 
 
     margin: 0; 
 
     padding: 0.5625rem 1.1875rem 0.375rem 0.5625rem; 
 
    } 
 
    .grow textarea { 
 
     resize: none; 
 
     border: none; 
 
     position: absolute; 
 
     top: 0; left: 0; 
 
     overflow: visible; 
 
     font-family: Nunito; 
 
     color: #616161; 
 
     font-size: 0.9375rem;/* Approximation due to font substitution */ 
 
     font-weight: 400; 
 
     line-height: 1.25rem;/* Approximation due to font substitution */ 
 
     text-align: left; 
 
     resize: none; 
 
     margin:0; 
 
    }

<form class="message-form" > 
 
    <div class="grow js-grow"> 
 
     <pre><span></span><br></pre> 
 
     <textarea></textarea> 
 
     </div> 
 

 
     <button type="submit" >Send</button> 
 
</form>

旁邊的註釋行「//我嘗試」在JavaScript沒有工作。任何幫助表示讚賞。

來源

2017-09-13 user8244016

即使存在一個HTML屬性'height'，它可能不會關心'calc'。您應該改爲設置CSS屬性'height'。 – CBroe

@CBroe我試圖將它設置爲「」，但沒有返回原始設計 – user8244016

@CBroe我也嘗試將它設置爲「4.28125rem」，但是textarea不能再次增長，而是出現了一個scrollbr。 – user8244016

對於html，沒有height屬性，你需要通過css設置高度，嘗試讓一個類具有文本區域的所有原始樣式，當用戶進行交互時（單擊，更改，輸入......任何）使用textarea刪除類與原始樣式並添加.grow類，然後當用戶提交表單時，您可以刪除.grow類並添加具有原始樣式的類。這樣，您的事件處理程序就可以簡單地在文本區域中的兩個不同類之間來回切換，其中一個表單處於其原始樣式設置，另一個表示它可以靈活並根據用戶輸入進行增長。

來源

2017-09-13 17:01:54

如何在使用JavaScript發送消息後修改textarea的設計？

回答

相關問題