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>
  • 相关阅读:
    舍不得花钱的心理分析
    DLL编程的导入导出,__declspec(dllimport),__declspec(dllexport)
    浅谈C/C++内存泄漏及其检测工具
    C++多线程编程简单实例
    linux镜像源设置
    Linux基础教程 linux无密码ssh登录设置
    兄弟连教育分享:用CSS实现鼠标悬停提示的方法
    PHP基础教程 PHP的页面缓冲处理机制
    Linux基础教程 linux下cat 命令使用详解
    PHP基础教程 php 网络上关于设计模式一些总结
  • 原文地址:https://www.cnblogs.com/cyfeng/p/12193373.html
Copyright © 2011-2022 走看看