suchen

Heim  >  Artikel  >  Web-Frontend  >  Detailliertes Beispiel für das Hinzufügen von Zeilennummern zu Textarea-Textfeldern in JavaScript

Detailliertes Beispiel für das Hinzufügen von Zeilennummern zu Textarea-Textfeldern in JavaScript

巴扎黑
巴扎黑Original
2017-09-08 11:28:342662Durchsuche

本文实例讲述了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>

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für das Hinzufügen von Zeilennummern zu Textarea-Textfeldern in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Einführung in die Implementierung des automatischen Scrollens von Inhalten der Auswahlliste durch JavaScriptNächster Artikel：Einführung in die Implementierung des automatischen Scrollens von Inhalten der Auswahlliste durch JavaScript

In Verbindung stehende Artikel

Mehr sehen