Question

我正在开发一个简单的聊天应用程序，并且在发送消息表单中我有一个＆＃34;可增长的＆＃34; textarea和提交button。 textarea首先设置为固定高度，一旦用户的消息开始长于该高度，则文本区域开始变大。继续直到成长textarea的高度为止300px，然后出现一个滚动条。

问题在于，当用户发送导致textarea增长的长消息时，单击发送按钮后，虽然我将其清空，但文本区域仍将保持相同的高度。

我点击按钮后尝试重置高度，但没有帮助。

这是我的代码：

＆＃13;

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
    });
});

＆＃13;

.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;
    }

＆＃13;

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

＆＃13;

评论旁边的行＆＃34; //我的尝试＆＃34;在JavaScript中没有用。任何帮助表示赞赏。

Answer 1

html没有height属性，您需要通过css设置高度，尝试拥有一个具有文本区域所有原始样式的类，当用户进行交互时（单击，更改，输入）。 .whatever）使用textarea删除具有原始样式的类并添加.grow类，然后当用户提交表单时，您可以删除.grow类并添加具有原始样式的类。这样，您的事件处理程序只需在文本区域的两个不同类之间来回切换，一个表单处于其原始样式，另一个表面可以根据用户输入灵活变长。

如何在JavaScript中发送消息后修改textarea的设计？

1 个答案: