zoukankan      html  css  js  c++  java
  • js 实现简单文本编辑器

    效果:

     代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>简单文本编辑器</title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            html,
            body {
                 100%;
                height: 100%;
                margin: 0;
                padding: 0;
                font: 12px/1.5 tahoma, arial, 'hiragino sans gb', 'microsoft yahei', sans-serif;
                -webkit-font-smoothing: antialiased;
                overflow: hidden;
            }
    
            #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>
    </head>
    
    <body>
        <div id="mian">
            <div id="leftBox"><textarea wrap="off" cols="2" id="leftNum" disabled></textarea>
            </div>
            <textarea id="test" name="content" onkeyup="keyUp()"
                onscroll="getId('leftNum').scrollTop = this.scrollTop;"></textarea>
        </div>
        <script type="text/javascript">
            var num = "";
            var test = getId('test');
            function getId(obj) {
                return document.getElementById(obj);
            }
            function keyUp() {
                var str = test.value;
                str = str.replace(/
    /gi, ""); // 
    匹配一个回车符
                str = str.split("
    ");
                n = str.length;
                line(n);
            }
            function line(n) {
                var lineobj = getId("leftNum");
                for (var i = 1; i <= n; i++) {
                    if (document.all) {
                        num += i + "
    ";// 判断浏览器是否是IE 
    匹配一个换行符
                    } else {
                        num += i + "
    ";
                    }
                }
                lineobj.value = num;
                num = "";
            }
        </script>
    </body>
    
    </html>
  • 相关阅读:
    DFS-B
    DFS/BFS-A
    DFS-回溯与剪枝-C
    BFS-八数码问题与状态图搜索
    PTA-1003 我要通过!
    二分-G
    二分-F
    二分-E
    二分-D
    二分-C
  • 原文地址:https://www.cnblogs.com/cyfeng/p/12193373.html
Copyright © 2011-2022 走看看