这是一个 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
/>
从代码中删除一些问题后,脚本将按预期工作 -
您应该监听文本区域的
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>
这是一个 更新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挂钩文档。
<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>
您可以尝试看看这是否可以解决您的问题吗?