如何使输入字段的高度响应内容？答案

【问题标题】：How to make input field's height responsive to the content?如何使输入字段的高度响应内容？
【发布时间】：2019-09-19 09:56:10
【问题描述】：

这是一个 MERN 堆栈应用程序。我尝试使用this script 使文本区域的高度响应内容。

看起来外部 javascript 文件正在运行，因为我尝试将 alert 放在 for 循环中并且它确实有效。所以我尝试在OnInput() 函数中放置警报，但没有调用alert。因此，我认为这个功能有问题。

index.html

<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>

  <script src="/main.js"></script>
</body>

main.js

var tx = document.getElementsByClassName('comment-area-responsive');

for (var i = 0; i < tx.length + 1; i++) {
  //   alert(i);
  tx[i].setAttribute(
    'style',
    'height:' + tx[i].scrollHeight + 'px;overflow-y:hidden;'
  );
  tx[i].addEventListener('change', OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  alert('hi2');
  this.style.height = this.scrollHeight + 'px';
}

页面

<textarea 
  className='comment-area-responsive' 
  name='title' 
  placeholder='What do you think?' 
  value={text} onChange={e => setText(e.target.value)} 
  required
/>

【问题讨论】：

您可能调用了您的函数OnInput，但您将其绑定到的事件是change 事件。只有在字段再次失去焦点后才会触发，而不是用户正在输入。
我很久以前写了一个 codepen 来在文本过多时更改 textarea 的字体大小，虽然不完全一样但可以提供帮助：codepen.io/elisabeth_hamel/pen/pdLRvv我使用了 keyup 事件

标签： javascript html css reactjs

【解决方案1】：

从您的代码中删除一些问题后，该脚本按预期工作 -

您应该收听文本区域的 input 事件，而不是 change 事件。
textarea 是一个容器，因此您使用结束标记 </textarea> 而不是自结束标记来关闭它。 Read more
也许您正在使用其他库，因此请确保您确实需要 textarea 上的 value={text} 和 onChange={e => setText(e.target.value)} 属性。如果您仅出于此脚本的目的添加它们，则不需要它们，如下面的代码所示。

解决上述所有问题后，运行下面的sn-p检查它是否正常工作

var tx = document.getElementsByClassName('comment-area-responsive');
for (var i = 0; i < tx.length; i++) {
  tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
  tx[i].addEventListener("input", OnInput, false);
}

function OnInput() {
  this.style.height = 'auto';
  this.style.height = (this.scrollHeight) + 'px';
}

<div>
<textarea 
  class='comment-area-responsive' 
  name='title' 
  placeholder='What do you think?'  
  required
  ></textarea>  
</div>

更新：为了让它与 React 一起工作，因为 React 以相同的方式处理 onChange 和 onInput，你可以在你的 onChange 处理程序中进行强>，喜欢 -

const setText = (val) => {
      this.setState({text: val});
      var tx = document.getElementsByClassName('comment-area-responsive');
      for (var i = 0; i < tx.length; i++) {
        tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
      }
    }

...

    <textarea 
      className='comment-area-responsive' 
      name='title' 
      placeholder='What do you think?' 
      value={text} onChange={e => setText(e.target.value)} 
      required>
    </textarea>

这是working Stackblitz to play around。

【讨论】：

更改了你所说的一切后它仍然不起作用，看起来OnInput()function 没有运行。添加onChange 不是为了这个目的，而是为了管理反应的状态。
使用 React 的 Stackblitz 链接更新了答案

【解决方案2】：

我认为问题在于您的文本区域。

<textarea 
  className='comment-area-responsive' 
  name='title' 
  placeholder='What do you think?' 
  value={text} onChange={e => setText(e.target.value)} 
  required
/>

textarea 标记必须隐式关闭。

<textarea 
  className='comment-area-responsive' 
  name='title' 
  placeholder='What do you think?' 
  value={text} onChange={e => setText(e.target.value)} 
  required
></textarea>

你能试试看这是否能解决你的问题吗？

【讨论】：

它仍然无法正常工作，看起来OnInput()function 没有运行
我尝试在控制台中输入tx，这个变量确实包含其中的文本区域
我发现for 循环也不会被调用，除非我将它设为for (var i = 0; i < tx.length; i++)。这很奇怪，因为当页面上有 2 个文本区域时，tx.length 确实会在浏览器控制台中显示 2。
但是当我尝试在 for 循环中提醒长度 alert(tx.length); 时，它会在浏览器中提醒 0。