文本编辑器左边显示行数
//调用方式
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 ...
最新文章
- Mac下使用svn命令
- android studio放置在函数上面看_Android中用Kotlin协程和Retrofit进行网络请求和取消请求...
- oracle建索引默认并发,ORACLE重建索引需要考虑问题
- 【深度学习】transformer 真的快要取代计算机视觉中的 CNN 吗?
- JSP、ASP、PHP Web应用程序怎么这么多P!
- 老板让我用少量样本 finetune 模型,我还有救吗?急急急,在线等!
- php 原子性,PHP下O_APPEND模式的原子性
- ​对比学习还能这样用:字节推出真正的多到多翻译模型mRASP2
- MSN登录问题:Error 80072ee7
- Acrobat Pro DC 教程,如何从 PDF 中提取页面?
- CTPN - 自然场景文本检测
- 华为手机流量日显示无服务器,华为手机开启了数据流量却不能上网怎么办
- 超好用的两款作图工具,用起来~~~
- 飞思卡尔智能车之舵机算法
- 间隔一段时间重复自动登录网站、定时自动登录网站的软件 —— 定时执行专家,无需复杂编程,简单配置即可使用
- Eclipse启动时闪退问题解决方案
- c语言实现字符串倒过来输出
- color model(颜色模型/色彩模型)
- Spring 中的Advice类型介绍
- Struts2+Datagrid表格显示(可显示多表内容)
热门文章
- Hadoop集群 MapReduce初级案例
- 依赖倒置(DIP),控制反转(IoC)与依赖注入(DI)
- BP人工神经网络的介绍与实现
- 面试经典书籍--程序员面试宝典
- golang中的对称加密
- golang中的select详解
- C#之windows桌面软件第六课:(上集)串口工具实现数据校验、用灯反应设备状态
- Linux开启动过程详解
- linux命令:nslookup 、tar、route , tracert, traceroute, netstat、write、mesg、touch
- 常考数据结构与算法:重建二叉树