//调用方式

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. 修改主机名 修改静态IP
  2. 如果某一运行的服务在/var/lock/subsys
  3. day01 python基础笔记
  4. VL53L0x TOF激光测距的 stm32 HAL库驱动代码
  5. python编写请求参数带文件_python:解析httppost请求,其中包含文件上传和其他参数...
  6. ECharts常用图表(柱状图)
  7. AdventureWorks2012.mdf的使用
  8. PostgreSQL下载及Windows系统安装步骤
  9. 最后3天!生信入门转录组和可视化学习捷径
  10. java 几分钟前几小时前几天前后转化为时间
  11. 博客右下角的动态人物(live2d)看板娘
  12. 不管你学的是什么专业,你都应该多少懂些管理学的东西-----【管理学十大经典定理}...
  13. odoo10 请假单扩展
  14. 老板带头反内卷,阿尔卑斯滑雪团建。。。别错过这一波上车机会
  15. dukelearntoprogram DNA链找基因问题 Java
  16. 电子琴节奏包制作_【买前必看】雅马哈kb291电子琴是杂牌吗音色怎么样?用后感受评测说【真实大揭秘】-欧阳倩倩的文章...
  17. 我国将投巨资开发网游 抵制进口垄断!
  18. webRTC——SDP(Session Description Protocal)
  19. 新手摆地摊,干什么样的模式更好?
  20. Java基础题03:(单选题)存储一个24X24点阵的汉字(每个点1bit),需要多少字节

热门文章

  1. 深入Redis内部-Redis 源码讲解
  2. 虚拟机及VmBasic编译引擎实现
  3. 正则匹配所有包括换行符
  4. STM32中I2C总线上数据的读、写。
  5. 枚举enum与#define 宏的区别?
  6. 线程:synchronized
  7. java- 和 || 优先级的问题
  8. 【Visual Studio】如何在VS 2012中打印变量值到输出窗口
  9. nginx+tomcat集群负载均衡中的多虚拟主机配置
  10. 总结网站调用Flash的几种方法【转】