JS-Methode zum Hinzufügen einer Zeilennummer zu den Fähigkeiten von Textarea text box

JS-Methode zum Hinzufügen einer Zeilennummer zu den Fähigkeiten von Textarea text box_javascript

WBOY

Freigeben： 2016-05-16 15:43:59

Original

1653 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man mit JS Zeilennummern zum Textfeld „Textarea“ hinzufügt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier verwenden wir JS, um die Funktion zum Anzeigen der Zeilennummer im Textfeld „Textarea“ zu realisieren. Vor jeder Zeile steht eine numerische Seriennummer. Wenn diese zum Anzeigen des Codes verwendet wird, können Sie direkt eine bestimmte finden Wenn die Zeilennummer nicht angezeigt wird, müssen Sie dies manuell tun. Wenn Sie diese Funktion wünschen, müssen Sie nur die TextArea-ID festlegen und die Länge und Breite des Codes hinzufügen des Textfelds werden durch CSS gesteuert. Sie können versuchen, es zu ändern. Die Breite der Anzeige sollte mit der JS übereinstimmen.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt:

<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>

Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.