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

时间：2023-03-09 16:26:27
文本框 textarea 动态显示行数（简单文本编辑器）

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

文本框 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>
 <div id="mian">

     <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea></div>

     <textarea id="test" name="content" onkeydown="keyUp()" onscroll="getId('leftNum').scrollTop = this.scrollTop;">

     </textarea>

 </div>

 <script type="text/javascript">

 var num = "";

 var btn = getId('btn');

 var test = getId('test');

 function getId(obj) {

     return document.getElementById(obj);

 }

 function keyUp(){

     var str = test.value;

     str = str.replace(/\r/gi,"");

     str = str.split("\n");

     n = str.length;

     line(n);

 }

 function line(n){

     var lineobj = getId("leftNum");

     for(var i = 1;i <= n;i ++){

        if(document.all){

         num += i + "\r\n";//判断浏览器是否是IE

        }else{

         num += i + "\n";

        }

     }

     lineobj.value = num;

     num = "";

 }

 (function() {

     keyUp();

 })();

 </script>

相关文章