原生js开发一个记事本，打印的时候可以自动分页打印

##之前我发表过一篇文章“多个input组成的记事本，当前行input文本溢出时自动聚焦到下一行input，回车自动切换下一行”记录了如何用多个input开发记事本的功能，但是虽然能够实现类似记事本功能，但是还存在很多问题。
比如：

1. 每一行输入框是一个个Input组成的，就需要创建很多个input,不够灵活。能否只用一个输入框。
2. 打印的时候在每一行底部添加一条横线，
3. 打印的时候无论是多大的纸张，都能自适应，超出一页的自动分页打印

1.先解决第一个问题“每一行输入框是一个个Input组成的，就需要创建很多个input,不够灵活。能否只用一个输入框。”

#多行输入框并可以自动换行的，首先第一个想到的就是textarea,的确比较满足需求，但是有个问题就是打印的时候textarea内容如果超出一页，第一页就会流出一片空白，会从第二页开始打印。(如下图)

这个问题我也没解决，后来就放弃使用textarea了。那就换成div呢，别忘了div有个属性contenteditable = ‘true’ ，设置这个属性div就可以实现像textarea一样的编辑框。

<div id="addTextarea" class="hr-div"  contenteditable="true" style="min-height: 464px;min-width: 566px;line-height: 30px;"></div>

测试一下分页打印效果

完美！！！！

2.解决了第一个问题就已经完成了50%，那打印的时候如何给文本添加横线呢？

#解决这个问题我说一下走的弯路，打印之前判断文本内容有多少行自动给文本添加行线，如何判断有多少行呢，通过换行符判断，最后换行符的位置动态添加hr标签，但问题是自动换行的时候没有换行符，这就无法添加横线。只能够实现回车换行的时候通过检测换行符来添加行线。

解决办法：行线通过背景图片添加(如下图)

需要考虑一个问题：输入框高度是不固定的，背景要能根据div高度自动增加
背景图片要设置在上下高度上重复循环
首先准备一张背景图片，图片就是一行的高度
关键代码如下div的行高line-height: 30px;要设置和背景图片的高度一致，

<div id="addTextarea"  class="hr-div"  contenteditable="true" style="min-height: 464px;min-width: 566px;line-height: 30px;background: url('hr_bg_hr1.jpg');background-repeat: repeat-y;background-size: 100% 30px;"></div>

这样无论输入框内容有多少，自动或者回车换行的时候都会自动添加一条行线。
打印效果如下

分页效果

解决！