vue项目中textarea无法根据输入的内容自适应高度 爬坑

Posted 2023-04-12 create13

需求

要求做一个可以输入的卡片，不管输入多少文字，输入的内容上下左右都居中。

刚开始掘金上找了一下 文章说样式上设置一个最小高度例如20px，然后可以通过监听textarea的input输入事件 把scrollHeight赋值给textarea的高度 并且要在赋值之前 先赋最小默认值 代码如下

var textarea = document.querySelector('.component-gift-designer-wrapper-outer-textarea'); textarea.addEventListener('input', (e) =>

    textarea.style.height = '20px';

    textarea.style.height = e.target.scrollHeight + 'px';

);

当时我在mounted里写了这个代码 发现还是不行 有的时候 输入监听不到 输入的内容 会出现被遮挡掉的情况 于是我写了如下代码

<textarea class="component-gift-designer-wrapper-outer-textarea" placeholder="请输入卡片内容" @input="changeTextareaContent"></textarea>

直接通过input事件 给textarea高度赋值 并且在样式里也不用写最小高度 直接写一个height: auto;和如下代码 这样实现了页面中可以输入内容的时候 自动撑开上下左右居中 但是 在删减的时候 内容并不会改变

    changeTextareaContent(e) 
      this.message = e.value
      const textareaContent = document.querySelector(
        '.component-gift-designer-wrapper-outer-textarea',
      )
      textareaContent.style.height = e.scrollHeight + 'px'
    ,

为了解决删减的时候,textarea框并没有改变的问题 所以我用了方案3  

直接在textarea输入内容时，给输入的样式高度先设置auto 后设置scrollHeight给输入的样式

直接完美解决了输入内容和删减内容的时候 textarea文本框自适应高度

    // 修改多行输入框textarea中的内容
    changeTextareaContent(e) 
      this.message = e.target.value
        e.target.style.height = 'auto'
        e.target.style.height = `$e.target.scrollHeightpx`
    ,

希望以上分享，可以帮到你~

如果有什么其他要探讨的 我们评论区见

同时在文本字段中输入时无法更新 TextArea

【中文标题】同时在文本字段中输入时无法更新 TextArea

【英文标题】：Unable to update TextArea while typing in Text Field at same time

【发布时间】：2015-07-14 06:16:06

【问题描述】：

你好，我是 java swing 新手，正在做一个项目，我无法将我在文本字段中输入的文本更新到 java swing 的文本区域，我使用这个 Example 作为参考，但是我正在使用 JFrame 表单在 Netbeans 中拖放来制作我的 GUI

这是我的代码

private void jTextField1ActionPerformed(java.awt.event.ActionEvent evt)                                             
        // TODO add your handling code here:

      String s = this.jTextField1.getText();
      jTextArea1.setEditable(false);

        jTextField1.getDocument().addDocumentListener(new DocumentListener() 

            public void insertUpdate(DocumentEvent de) 
                jTextArea1.setText(s);
            

            @Override
            public void removeUpdate(DocumentEvent de) 
                jTextArea1.setText(s);
            

            @Override
            public void changedUpdate(DocumentEvent de) 
            //Plain text components don't fire these events.
            
        );

         

我无法通过使用拖放方法来做到这一点，而它对我来说工作正常，就像我在上面发布的示例一样。

任何帮助将不胜感激

【问题讨论】：

您不太可能打算在动作侦听器中添加文档侦听器。只需在设置 GUI 的位置添加文档侦听器即可。

【参考方案1】：

通常情况下，我们不会将一个 Listener 放在另一个 Listener 中，这会使内部的 Listener 被多次调用。 清除以下代码。

jTextArea1.setEditable(false);

jTextField1.getDocument().addDocumentListener(new DocumentListener() 

    public void insertUpdate(DocumentEvent de) 
        jTextArea1.setText(s);
    

    @Override
    public void removeUpdate(DocumentEvent de) 
        jTextArea1.setText(s);
    

    @Override
    public void changedUpdate(DocumentEvent de) 
        //Plain text components don't fire these events.
    
);

然后使用您的 Netbeans GUI Builder 使 jTextArea1 不可编辑（在 Properties 中），并将 DocumentListener 添加到 jTextField1，就像您对它的 ActionListener 所做的那样。

然后更新GUI Builder创建的新添加的方法中的文本，我认为是：

public void jTextField1RemoveUpdate(DocumentEvent de)
public void jTextField1InsertUpdate(DocumentEvent de)

在每个方法中，您调用 jTextArea1.setText(jTextField1.getText());

【讨论】：

嗯，它有助于我清除我的概念，即我们不能在任何其他侦听器中使用侦听器，我试图从我的文本框的动作侦听器复制粘贴我的代码到我的 GUI 的构造函数中工作，谢谢队友:)