文本框 textarea 动态显示行数（简单文本编辑器）

工作需求做一个文本编辑器简单的。

右边输入文字，左边会显示相应的代码行。清空也会变为1.

废话不多说上代码，自己理解。

<style type="text/css">
*{margin: 0; padding: 0;}
html,body{height: 100%; margin: 0; padding: 0;font: 12px/1.5 tahoma, arial, 'hiragino sans gb', 'microsoft yahei', sans-serif;-webkit-font-smoothing: antialiased;}
#mian{ width:640px; height:100%;}
#leftBox{background:#ecf0f5;width:35px; height:100%; text-align:left; float: left;}
#test{border:1px solid #eaeaea; outline:none; width:600px; height:100%; resize: none; background: rgb(250,250,250); line-height: 24px;font-size: 14px;float: left; padding:10px 8px;  color: black; font-family: inherit; box-sizing: border-box;}
#leftNum{ height:100%; width: 100%; resize: none;outline:none; overflow-y: hidden; overflow-x: hidden; border: 0; background: rgb(247,247,247); color: #999;line-height: 24px;font-size: 14px; padding:10px 4px; text-align: right; font-weight: bold; box-sizing: border-box;}
</style>

 1 <div id="mian">
 2     <div id="leftBox"><textarea wrap="off"