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 相关文章推荐
Add a Picture to a Microsoft Word Document
Jun 15 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
JavaScript判断表单中多选框checkbox选中个数的方法
Aug 17 Javascript
JS实现的不规则TAB选项卡效果代码
Sep 18 Javascript
jQuery抛物线运动实现方法(附完整demo源码下载)
Jan 08 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
Oct 05 Javascript
jQuery控制控件文本的长度的操作方法
Dec 05 Javascript
vue 实现类似淘宝星级评分的示例
Mar 01 Javascript
JavaScript中为事件指定处理程序的五种方式分析
Jul 27 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue给对象动态添加属性和值的实例
Sep 09 Javascript
解决vue组件销毁之后计时器继续执行的问题
Jul 21 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
通达OA公共代码 php常用检测函数
2011/12/14 PHP
获取用户Ip地址通用方法与常见安全隐患(HTTP_X_FORWARDED_FOR)
2013/06/01 PHP
请离开include_once和require_once
2013/07/18 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php中使用GD库做验证码
2016/03/31 PHP
php tpl模板引擎定义与使用示例
2019/08/09 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
在一个js文件里远程调用jquery.js会在ie8下的一个奇怪问题
2010/11/28 Javascript
jquery 快速回到页首的方法
2013/12/05 Javascript
js锁屏解屏通过对$.ajax进行封装实现
2014/07/31 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
jQuery列表检索功能实现代码
2017/07/17 jQuery
浅谈vue父子组件怎么传值
2018/07/21 Javascript
JS简单表单验证功能完整示例
2020/01/26 Javascript
详解vue v-model
2020/08/31 Javascript
python实现封装得到virustotal扫描结果
2014/10/05 Python
python修改注册表终止360进程实例
2014/10/13 Python
在类Unix系统上开始Python3编程入门
2015/08/20 Python
Python中动态检测编码chardet的使用教程
2017/07/06 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python爬虫容易学吗
2020/06/02 Python
如何在python中判断变量的类型
2020/07/29 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
详解使用HTML5 Canvas创建动态粒子网格动画
2016/12/14 HTML / CSS
泰国第一在线超市:Tops
2021/02/13 全球购物
大学生学习2014全国两会心得体会
2014/03/13 职场文书
新文化运动的口号
2014/06/21 职场文书
人事主管岗位职责说明书
2014/07/30 职场文书
入党积极分子自我批评思想汇报
2014/10/10 职场文书
上课说话检讨书
2015/01/27 职场文书
刑事附带民事代理词
2015/05/25 职场文书
2016党员党课心得体会
2016/01/07 职场文书
2019脱贫攻坚工作总结报告范本!
2019/08/06 职场文书
MySQL主从搭建(多主一从)的实现思路与步骤
2021/05/13 MySQL
python中使用 unittest.TestCase单元测试的用例详解
2021/08/30 Python