textarea高度自适应且不出现滚动条

А幽Χ暝Э

已于 2023-03-26 23:25:39 修改

阅读量1.1k

点赞数

文章标签： javascript 前端 html

于 2023-03-26 22:50:30 首次发布

本文链接：https://blog.csdn.net/Lingyv77/article/details/129786142

版权

网上找了好一些文章都看不懂, 感觉没那么难实现, 不知道他们代码写那么多干什么

css:

    .ele-field__text-textarea {
      resize: none;
      padding: 0;
      overflow: hidden;
    }

js:

    // textarea滚动设置自适应高度 
    const onScroll = (event: Event): void => {
      const textareaDom = event.target as HTMLTextAreaElement;
      textareaDom.style.height = textareaDom.scrollHeight + 'px';
    };

    // onInput值改变事件重置height 触发onScroll事件设置textarea自适应高度
    const onInput = (event: Event): void => {
      textareaDom.style.height = 'auto';
    };

    const renderTextarea = () => (
      <textarea
        class={[bem('text-textarea'), , { [bem('text-input-error')]: props.error }]}
        onInput={onInput}
        onScroll={onScroll}
      />
    );

这里我用tsx写的主要实现就是将滚动条隐藏overflow: hidden, 然后监听滚动时候textarea的scrollHeight赋值给height就行实现设置高度, 值改变重置高度使得scrollHeight值重新刷新然后再赋值给height

还有一个方法给一个元素设置contenteditable属性这个元素就可以编辑了其他样式自己整就行