recherche

Maison >interface Web >js tutoriel >Exemple détaillé de la façon d'ajouter des numéros de ligne aux zones de texte Textarea en JavaScript

Exemple détaillé de la façon d'ajouter des numéros de ligne aux zones de texte Textarea en JavaScript

巴扎黑
巴扎黑original
2017-09-08 11:28:342669parcourir

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-textarea-show-row-num-codes/

具体代码如下：

<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 p{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("p");
  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("p");
  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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Introduction à la façon dont JavaScript implémente le défilement automatique du contenu de la liste SelectArticle suivant：Introduction à la façon dont JavaScript implémente le défilement automatique du contenu de la liste Select

Articles Liés

Voir plus