公司最近的一个项目,有笔录功能,需要有分页效果,因为笔录的内容不固定的,所以页数也是动态的。
其实翻页效果我通过JS实现了,做法是获取到textarea的scrollHeight值和clientHeight值,如果超高的话就截取内容并且自动跳到下一页。
但是遇到了几个问题。
1.在有多页的情况下,并且用户在内容中间(也就是说不是在最后一页),用户一旦输入内容,后所有子页中的内容都需要跟随改变,功能我也实现了,但是很笨拙,通过onkeyup事件截取内容,把多余的内容加给子页,子页的内容再次截取将多余的内容赋予下一个子页,一直向后推,直到最后一页为止,还考虑到了一个情况,如果最后一页还有超高的情况就新加一页。
2.和问题1情况相反,用户在中间页删除也就是要把所有页数的内容往前推。
3.还有一种视觉效果,比如设置textarea row=20,通过onkeyup事件监测用户输入完成了,多余的内容会显示到第21行,虽然这个是一瞬间的,但是光标会自动定位到当前页的内容尾部。
是一个后端开发,前端知识知道的并不是很多,CSDN我也找了不少,没有对应的例子。往各位给点思路或者用一用别的方式实现。