JavaScript发送消息后如何修改textarea的设计？答案

【问题标题】：How to modify the design of textarea after sending a message in JavaScript?JavaScript发送消息后如何修改textarea的设计？
【发布时间】：2017-09-14 01:01:54
【问题描述】：

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

问题是当用户发送一条导致文本区域增长的长消息时，点击发送按钮后，尽管我清空了文本区域，但文本区域仍处于相同的增长高度。

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

这是我的代码：

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 中注释“//my try”旁边的行不起作用。任何帮助表示赞赏。

【问题讨论】：

即使 HTML 属性 height 存在，它也可能不关心 calc。您应该改为设置 CSS 属性 height。
@CBroe 我尝试将其设置为“”，但这并没有返回原始设计
@CBroe 我也尝试将其设置为“4.28125rem”，但随后 textarea 无法再次增长，而是出现了一个滚动条。
为什么你需要重新设置 textarea 的高度——你在哪里设置它不同于它的值首先从样式表中获取？
啊，好吧，我明白了，您可以通过将文本克隆到 pre 元素中来实现这一点。您的错误只是您尝试再次清除跨度的方式-跨度没有value。您使用textContent 设置它 - 所以也使用相同的方法再次删除它。除了这样做和清除文本区域之外，您不应该做任何其他事情，尤其是没有 CSS 操作。

标签： javascript html css

【解决方案1】：

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

【讨论】：