文本框创建时有默认高度,内容较多时会出现滚动条。用户可以拖动右侧、底部和右下角来分别进行横向、纵向、对角缩放。
纵向放大时,最大高度会自动限制为刚好包住全部文字内容,不会再继续超过内容高度。
默认高度:180px
支持横向拖放
支持纵向拖放
支持对角拖放
这是一个自定义的文本框 demo。你可以直接编辑这里的内容,也可以拖动文本框边缘来调整大小。
需求点包括:
1. 新建时指定默认高度;
2. 内容很多时显示滚动条;
3. 用户既可以放大,也可以缩小;
4. 支持横向拖动;
5. 支持纵向拖动;
6. 支持右下角对角拖动;
7. 高度向上拖大时,不能超过文字实际内容所需高度。
为了更容易观察效果,这里特意放入了比较多的文字。
当文本框高度小于内容高度时,内部会出现滚动条;
当你继续向下拉大文本框时,会在“刚好展示完整内容”的高度停止。
你还可以尝试:
- 把宽度缩窄,这样文字会自动换行,内容总高度会变大;
- 再向下拉高文本框,这时最大高度会重新根据当前宽度下的内容高度计算;
- 修改文字内容后,最大高度也会动态更新。
这类交互常见于富文本编辑器、备注输入框、聊天草稿区和可配置后台表单中。
当前尺寸:520 × 180
内容最大高度:--
提示:这个 demo 没有使用原生 resize,而是自己实现了拖拽逻辑,因此可以精确控制“高度不能超过内容”的规则。