如何使输入字段的高度响应内容? [英] How to make input field's height responsive to the content?
问题描述
It is a MERN stack app. I tried to make the height of a textarea responsive to the content using this script.
外部javascript文件似乎可以正常运行，因为我尝试将 alert 放入for循环中，并且确实可以正常工作.因此，我尝试将警报放入 OnInput()函数中，但未调用 alert .因此，我认为此功能有问题.
It looks like the external javascript file is working because I tried putting alert in the for loop and it did work. So I tried putting alert inside the OnInput() function but the alert was not called. Therefore, I think something is wrong with this function.
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
/>
推荐答案
从代码中删除了一些问题后，脚本按预期工作-
The script works as intended after removing a few problems from your code -
-
您应该侦听textarea的
input事件，而不是change事件.
textarea 是一个容器，因此您使用结束标记</textarea> 而不是自结束标记将其关闭.了解详情
textarea is a container, so you close it using a closing tag </textarea> and not a self closing tag. Read more
也许您正在使用其他库，所以请确保您确实需要 value = {text} 和 onChange = {e =>文本区域上的setText(e.target.value)} 属性.如果仅出于此脚本的目的添加了它们，那么就不需要它们了，如下面的代码所示.
Maybe you're using some other library, so make sure that you really need value={text} and onChange={e => setText(e.target.value)} attributes on the textarea. If you added them only for the purpose of this script, then they're not needed as you can see in the code below.
在修复所有上述问题后，运行以下代码段以检查其是否正常工作
Run the snippet below to check that it works correctly after fixing all the above problems
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 处理程序内，例如-
Update : For getting it to work with React, since React treats onChange and onInput in the same way, you can do it inside your onChange handler, like -
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玩耍的游戏.
这篇关于如何使输入字段的高度响应内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
