如何让输入框的高度响应内容？

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

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

您应该监听文本区域的
```
change
```
事件，而不是
```
input
```
事件。
```
textarea
```
是一个容器，因此您可以使用关闭标签
```
</textarea>
```
而不是自关闭标签来关闭它。了解更多
也许您正在使用其他库，因此请确保您确实需要文本区域上的
```
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

，你可以在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>

这是一个

可以玩的 Stackblitz。

更新2

：要使用像antd这样的组件库使其与React一起工作，而不更改本机组件实现，只需在useEffect中添加所有代码逻辑： // You'll need to pick `value` for useEffect's dependencies array function TextAreaComponent({ value, ...props }) { const innerRef = useRef(null) useEffect(() => { // default antd ref doesn't stores the `textarea` element itself // instead, you need to get it from inner ref prop // (this is a lib specific approach) const textarea = innerRef.current?.resizableTextArea?.textArea const onType = (e: Event) => { const target = e.target target.style.height = 'auto' target.style.height = `${target.scrollHeight}px` } if (textarea) { textarea.setAttribute( 'style', 'height:' + textarea.scrollHeight + 'px;overflow-y:hidden;' ) textarea.addEventListener('input', onType, false) } return () => { if (textarea) { textarea.removeEventListener('input', onType) } }, [value]) return ( <Input.TextArea ref={innerRef} value={value} {...props} /> ) }

额外：如果您需要将任何外部引用传递给组件并继续使用

innerRef

（如上所示），请查看

useImperativeHandle

挂钩文档。

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>

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

如何让输入框的高度响应内容？

问题描述投票：0回答：2

2个回答

最新问题

如何让输入框的高度响应内容？

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2