自定义可缩放文本框

文本框创建时有默认高度,内容较多时会出现滚动条。用户可以拖动右侧、底部和右下角来分别进行横向、纵向、对角缩放。 纵向放大时,最大高度会自动限制为刚好包住全部文字内容,不会再继续超过内容高度。

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