文本编辑器左边显示行数
//调用方式
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
文本编辑器左边显示行数相关推荐
- CSS 限制文本显示行数
文章目录 CSS限制文本显示行数 假设需求 解决方案 CSS样式 示例Demo 浏览器页面效果 CSS限制文本显示行数 假设需求 有若干段文本内容,要显示在一个盒子内,宽高限制: 要求只能显示5行, ...
- vim编辑器显示行数
设置ubuntu 的vim编辑器显示行数,方法如下: 1.打开终端输入:sudo vi /etc/vim/vimrc,打开vim的配置文件(使用sudo可忽视vimrc文件的readonly属性): ...
- 《Linux指令从入门到精通》——4.3 Linux下全屏幕文本编辑器的命令行方式
本节书摘来自异步社区<Linux指令从入门到精通>一书中的第4章,第4.3节,作者:宋磊 , 宋馥莉 , 雷文利著,更多章节内容可以访问云栖社区"异步社区"公众号查看 ...
- sqlserver查询窗口显示行数及调整字体大小
(1)sqlserver查询窗口显示行数 工具->选项->文本编辑器->所有语言->常规->显示->行号 选中它 (2)字体大小 工具->选项->环境- ...
- C# RichTextBox 做简单的HTML代码编辑器 ---------左侧显示行号
说明:此显示行号为实际行号,不论是空行还是自动换行,都计算在内,跟实际IDE的行号不同,同步滚动会有半行高度以内的误差. 实现原理,在RichTextBox 编辑器左侧放置另一RichTextBox ...
- 设置pandas显示行数_Pandas这样来设置,做数据分析舒适百倍
在日常使用pandas的过程中,由于我们所分析的数据表规模.格式上的差异,使得同样的函数或方法作用在不同数据上的效果存在差异. 而pandas有着自己的一套「参数设置系统」,可以帮助我们在遇到不同的数 ...
- Linux vi 文本代码时显示行号或不显示行号
Linux vi 文本代码时显示行号或不显示行号 前提 安装了vim $vi ~/.vimrc 显示的话加上 set nu 不想显示的话可以注释掉 "set nu 之后 $source ~ ...
- linux中vim如何显示行数,vim 在linux下中如何设置显示行数
在.vimrc(或/etc/vimrc)文件中输入如下文本: set tabstop=4 set softtabstop=4 set shiftwidth=4 set noexpandtab set ...
- vim 在linux下中如何设置显示行数
在.vimrc(或/etc/vimrc)文件中输入如下文本: set tabstop=4 set softtabstop=4 set shiftwidth=4 set noexpandtab set ...
最新文章
- 修改主机名 修改静态IP
- 如果某一运行的服务在/var/lock/subsys
- day01 python基础笔记
- VL53L0x TOF激光测距的 stm32 HAL库驱动代码
- python编写请求参数带文件_python:解析httppost请求,其中包含文件上传和其他参数...
- ECharts常用图表(柱状图)
- AdventureWorks2012.mdf的使用
- PostgreSQL下载及Windows系统安装步骤
- 最后3天!生信入门转录组和可视化学习捷径
- java 几分钟前几小时前几天前后转化为时间
- 博客右下角的动态人物(live2d)看板娘
- 不管你学的是什么专业,你都应该多少懂些管理学的东西-----【管理学十大经典定理}...
- odoo10 请假单扩展
- 老板带头反内卷,阿尔卑斯滑雪团建。。。别错过这一波上车机会
- dukelearntoprogram DNA链找基因问题 Java
- 电子琴节奏包制作_【买前必看】雅马哈kb291电子琴是杂牌吗音色怎么样?用后感受评测说【真实大揭秘】-欧阳倩倩的文章...
- 我国将投巨资开发网游 抵制进口垄断!
- webRTC——SDP(Session Description Protocal)
- 新手摆地摊,干什么样的模式更好?
- Java基础题03:(单选题)存储一个24X24点阵的汉字(每个点1bit),需要多少字节