Heim > Artikel > Web-Frontend > JS-Methode zum Hinzufügen einer Zeilennummer zu den Fähigkeiten von Textarea text box_javascript

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

WBOYOriginal: 2016-05-16 15:43:591580Durchsuche

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>

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

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：js Bild-Flip-Book-Effektcode Sharing_Javascript-KenntnisseNächster Artikel：js Bild-Flip-Book-Effektcode Sharing_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen