Sometimes we need a teatarea in cube-scroll component. However the problem is, we can not use the native scroll in teatarea when we need to scroll, due to we prevent the default broswer behavior of 'scroll' event in Cube-scroll.
Now, we give this ../.., introducing two ways how to solve this trouble.
Both approach takes advantage of the cube-scroll support for nesting. We wrap the internal input box with cube-scroll and simulate the scrolling behavior by cube-scroll.
有时候我们需要在 cube-scroll 组件中包含 teatarea 输入框。然而由于我们在使用 cube-scroll 时禁用了浏览器 'scroll' 事件的默认行为,因此我们无法在 textarea 输入框中使用浏览器的原生滚动。
现在我们希望通过这个例子,介绍两种解决这个问题的方法。
核心都是利用了 cube-scroll 支持嵌套的能力,我们将内部的输入框用 cube-scroll 进行包装,通过 cube-scroll 去模拟滚动行为。但是有一个要求是,内容区域必须是高度自适应,即高度随内容多少增加或减少。
1. 利用 div 标签模拟 textarea,实现内容区域高度自适应。
2. 利用 textarea 配合 js,实现高度自适应。
最后,我们还需要一些额外的工作保证输入过程中,光标能始终在视线内,保持与原生输入框的行为一致。