//调用方式

createTextAreaWithLines('codeTextarea');

//文本编辑框左侧行数显示
function createTextAreaWithLines(id) {
var el = document.createElement('DIV');
var ta = document.getElementById(id);
ta.parentNode.insertBefore(el, ta);
el.appendChild(ta);
el.className = 'textAreaWithLines';

el.style.width = (ta.offsetWidth + 30) + 'px';
ta.style.position = 'absolute';
ta.style.left = '30px';
el.style.height = (ta.offsetHeight + 2) + 'px';
el.style.overflow = 'hidden';
el.style.position = 'relative';
el.style.width = (ta.offsetWidth + 30) + 'px';
var lineObj = document.createElement('DIV');
lineObj.style.position = 'absolute';
lineObj.style.top = lineObjOffsetTop + 'px';
lineObj.style.left = '0px';
lineObj.style.width = '27px';
el.insertBefore(lineObj, ta);
lineObj.style.textAlign = 'right';
lineObj.className = 'lineObj';
var string = '';
for (var no = 1; no < 5000; no++) {
if (string.length > 0) string = string + '<br>';
string = string + no;
}
ta.onkeydown = function () { positionLineObj(lineObj, ta); };
ta.onmousedown = function () { positionLineObj(lineObj, ta); };
ta.onscroll = function () { positionLineObj(lineObj, ta); };
ta.onblur = function () { positionLineObj(lineObj, ta); };
ta.onfocus = function () { positionLineObj(lineObj, ta); };
ta.onmouseover = function () { positionLineObj(lineObj, ta); };
lineObj.innerHTML = string;
}
function positionLineObj(obj, ta) {
obj.style.top = (ta.scrollTop * -1 + lineObjOffsetTop) + 'px';
}

转载于:https://www.cnblogs.com/-netxc/p/4724952.html

文本编辑器左边显示行数相关推荐

  1. CSS 限制文本显示行数

    文章目录 CSS限制文本显示行数 假设需求 解决方案 CSS样式 示例Demo 浏览器页面效果 CSS限制文本显示行数 假设需求 有若干段文本内容,要显示在一个盒子内,宽高限制: 要求只能显示5行, ...

  2. vim编辑器显示行数

    设置ubuntu 的vim编辑器显示行数,方法如下: 1.打开终端输入:sudo vi /etc/vim/vimrc,打开vim的配置文件(使用sudo可忽视vimrc文件的readonly属性): ...

  3. 《Linux指令从入门到精通》——4.3 Linux下全屏幕文本编辑器的命令行方式

    本节书摘来自异步社区<Linux指令从入门到精通>一书中的第4章,第4.3节,作者:宋磊 , 宋馥莉 , 雷文利著,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...

  4. sqlserver查询窗口显示行数及调整字体大小

    (1)sqlserver查询窗口显示行数 工具->选项->文本编辑器->所有语言->常规->显示->行号 选中它 (2)字体大小 工具->选项->环境- ...

  5. C# RichTextBox 做简单的HTML代码编辑器 ---------左侧显示行号

    说明:此显示行号为实际行号,不论是空行还是自动换行,都计算在内,跟实际IDE的行号不同,同步滚动会有半行高度以内的误差. 实现原理,在RichTextBox 编辑器左侧放置另一RichTextBox ...

  6. 设置pandas显示行数_Pandas这样来设置,做数据分析舒适百倍

    在日常使用pandas的过程中,由于我们所分析的数据表规模.格式上的差异,使得同样的函数或方法作用在不同数据上的效果存在差异. 而pandas有着自己的一套「参数设置系统」,可以帮助我们在遇到不同的数 ...

  7. Linux vi 文本代码时显示行号或不显示行号

    Linux vi 文本代码时显示行号或不显示行号 前提  安装了vim $vi ~/.vimrc 显示的话加上 set nu 不想显示的话可以注释掉 "set nu 之后 $source ~ ...

  8. linux中vim如何显示行数,vim 在linux下中如何设置显示行数

    在.vimrc(或/etc/vimrc)文件中输入如下文本: set tabstop=4 set softtabstop=4 set shiftwidth=4 set noexpandtab set ...

  9. vim 在linux下中如何设置显示行数

    在.vimrc(或/etc/vimrc)文件中输入如下文本: set tabstop=4 set softtabstop=4 set shiftwidth=4 set noexpandtab set ...

最新文章

  1. Mac下使用svn命令
  2. android studio放置在函数上面看_Android中用Kotlin协程和Retrofit进行网络请求和取消请求...
  3. oracle建索引默认并发,ORACLE重建索引需要考虑问题
  4. 【深度学习】transformer 真的快要取代计算机视觉中的 CNN 吗?
  5. JSP、ASP、PHP Web应用程序怎么这么多P!
  6. 老板让我用少量样本 finetune 模型,我还有救吗?急急急,在线等!
  7. php 原子性,PHP下O_APPEND模式的原子性
  8. ​对比学习还能这样用:字节推出真正的多到多翻译模型mRASP2
  9. MSN登录问题:Error 80072ee7
  10. Acrobat Pro DC 教程,如何从 PDF 中提取页面?
  11. CTPN - 自然场景文本检测
  12. 华为手机流量日显示无服务器,华为手机开启了数据流量却不能上网怎么办
  13. 超好用的两款作图工具,用起来~~~
  14. 飞思卡尔智能车之舵机算法
  15. 间隔一段时间重复自动登录网站、定时自动登录网站的软件 —— 定时执行专家,无需复杂编程,简单配置即可使用
  16. Eclipse启动时闪退问题解决方案
  17. c语言实现字符串倒过来输出
  18. color model(颜色模型/色彩模型)
  19. Spring 中的Advice类型介绍
  20. Struts2+Datagrid表格显示(可显示多表内容)

热门文章

  1. Hadoop集群 MapReduce初级案例
  2. 依赖倒置(DIP),控制反转(IoC)与依赖注入(DI)
  3. BP人工神经网络的介绍与实现
  4. 面试经典书籍--程序员面试宝典
  5. golang中的对称加密
  6. golang中的select详解
  7. C#之windows桌面软件第六课:(上集)串口工具实现数据校验、用灯反应设备状态
  8. Linux开启动过程详解
  9. linux命令:nslookup 、tar、route , tracert, traceroute, netstat、write、mesg、touch
  10. 常考数据结构与算法:重建二叉树