zoukankan      html  css  js  c++  java
  • 文本框 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{ 640px; height:100%;}
    #leftBox{background:#ecf0f5;35px; height:100%; text-align:left; float: left;}
    #test{border:1px solid #eaeaea; outline:none; 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%;  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" cols="2" id="leftNum" disabled></textarea></div>
     3     <textarea id="test" name="content" onkeydown="keyUp()" onscroll="getId('leftNum').scrollTop = this.scrollTop;">
     4     </textarea>
     5 </div>
     6 <script type="text/javascript">
     7 var num = "";
     8 var btn = getId('btn');
     9 var test = getId('test');
    10 function getId(obj) {
    11     return document.getElementById(obj);
    12 }
    13 function keyUp(){
    14     var str = test.value; 
    15     str = str.replace(/
    /gi,"");
    16     str = str.split("
    ");
    17     n = str.length;
    18     line(n);
    19 }
    20 function line(n){
    21     var lineobj = getId("leftNum");
    22     for(var i = 1;i <= n;i ++){
    23        if(document.all){
    24         num += i + "
    ";//判断浏览器是否是IE  
    25        }else{
    26         num += i + "
    ";
    27        }
    28     }
    29     lineobj.value = num;
    30     num = "";
    31 }
    32 
    33 (function() {
    34     keyUp();
    35 })();
    36 </script>
  • 相关阅读:
    浅析堆与垃圾回收
    再探JVM内存模型
    索引使用的基本原则
    常见的索引模型浅析
    初识InnoDB体系架构和逻辑存储结构
    一条update SQL语句是如何执行的
    MySQL一条查询语句是如何执行的
    堆与优先队列
    ibatis BindingException Parameter 'status' not found. Available parameters are [arg1, arg0, param1, param2] 解决方法
    Mysql通过MHA实现高可用
  • 原文地址:https://www.cnblogs.com/matthew9298-Begin20160224/p/5833959.html
Copyright © 2011-2022 走看看