JS给Textarea文本框添加行号的方法


Posted in Javascript onAugust 20, 2015

本文实例讲述了JS给Textarea文本框添加行号的方法。分享给大家供大家参考。具体如下:

这里使用JS实现让Textarea文本框显示行号的功能,每一行的前面都会有下数字序号,如果用来显示代码的话,可以直接找到某一行,如果不显示行号,则还要自己手功去查,想要此功能,你只需设置好TextArea ID,并加入代码中的JavaScript代码部分即可,文本框的长宽则是由CSS来控制的,你可试着修改一下,长宽的显示要与JS相匹配。

运行效果截图如下:

JS给Textarea文本框添加行号的方法

在线演示地址如下:

具体代码如下:

<html> 
<head>
<title>Js给文本框添加行号功能</title>
<style type="text/css">
 #codeTextarea{width: 500px;height: 310px;}
.textAreaWithLines{font-family: courier;border: 1px solid #ddd;}
.textAreaWithLines textarea,.textAreaWithLines div{border: 0px;line-height: 120%;font-size: 12px;}
.lineObj{color: #666;}
</style>
<script type="text/javascript">
var lineObjOffsetTop = 2;
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<20;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';  
}
</script>
</head>  
<body>
<form>
<textarea id="codeTextarea"></textarea>
</form>
<script type="text/javascript">
createTextAreaWithLines('codeTextarea');
</script>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript的面向对象方法以及差别
Mar 31 Javascript
JavaScript的document对象和window对象详解
Dec 30 Javascript
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
jquery 选取方法都有哪些
May 18 Javascript
javascript实现playfair和hill密码算法
Dec 07 Javascript
jQuery获取父元素及父节点的方法小结
Apr 14 Javascript
js改变css样式的三种方法推荐
Jun 28 Javascript
JavaScript中全选、全不选、反选、无刷新删除、批量删除、即点即改入库(在yii框架中操作)的代码分享
Nov 01 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
Nuxt的路由配置和参数传递方式
Nov 06 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 #Javascript
javascript如何操作HTML下拉列表标签
Aug 20 #Javascript
七夕情人节丘比特射箭小游戏
Aug 20 #Javascript
js脚本分页代码分享(7种样式)
Aug 19 #Javascript
贴近用户体验的Jquery日期、时间选择插件
Aug 19 #Javascript
JS文字球状放大效果代码分享
Aug 19 #Javascript
IE6兼容透明背景图片及解决方案
Aug 19 #Javascript
You might like
php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
2012/09/07 PHP
php对大文件进行读取操作的实现代码
2013/01/23 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
javaScript 判断字符串是否为数字的简单方法
2009/07/25 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
jQuery实现表单提交时判断的方法
2014/12/13 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
JS实现弹性菜单效果代码
2015/09/07 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
2016/06/16 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
详谈JS中数组的迭代方法和归并方法
2017/08/11 Javascript
10个在JavaScript开发中常遇到的BUG
2017/12/18 Javascript
使用JS判断移动端手机横竖屏状态
2018/07/30 Javascript
JS实现随机抽选获奖者
2019/11/07 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
python基础教程之序列详解
2014/08/29 Python
python之wxPython应用实例
2014/09/28 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python实现12306抢票及自动邮件发送提醒付款功能
2018/03/08 Python
django模板加载静态文件的方法步骤
2019/03/01 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
Python3内置模块pprint让打印比print更美观详解
2019/06/02 Python
python实现动态创建类的方法分析
2019/06/25 Python
python 命名规范知识点汇总
2020/02/14 Python
pyinstaller打包成无控制台程序时运行出错(与popen冲突的解决方法)
2020/04/15 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
车祸赔偿收入证明
2014/01/09 职场文书
社区端午节活动方案
2014/01/28 职场文书
节能宣传周活动总结
2014/05/08 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
骨干教师事迹材料
2014/12/17 职场文书
个人党性分析材料
2014/12/19 职场文书