Question

这是一个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
/>

Answer 1

从代码中删除了一些问题后，脚本可以按预期工作-

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

在修复所有上述问题后，运行以下代码段以检查其是否正常工作

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，因此您可以在{{ 1}}处理程序，例如-

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

这里是working Stackblitz to play around。

Answer 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>

您可以尝试看看是否可以解决您的问题吗？

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

2 个答案: