집 > 기사 > 웹 프론트엔드 > Textarea 텍스트 상자_javascript 기술에 줄 번호를 추가하는 JS 메서드

Textarea 텍스트 상자_javascript 기술에 줄 번호를 추가하는 JS 메서드

WBOY원래의: 2016-05-16 15:43:591580검색

이 문서의 예에서는 JS를 사용하여 텍스트 영역 텍스트 상자에 줄 번호를 추가하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여기에서는 JS를 사용하여 텍스트 영역 텍스트 상자에 줄 번호를 표시하는 기능을 구현합니다. 코드를 표시하는 데 사용되는 경우 특정 줄을 직접 찾을 수 있습니다. 줄 번호가 표시되지 않으면 직접 확인해야 하며, 이 기능을 사용하려면 TextArea ID를 설정하고 코드의 길이와 너비만 추가하면 됩니다. 텍스트 상자의 너비는 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 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 프로그래밍 설계에 도움이 되기를 바랍니다.

성명：

이전 기사：Node.js 이미지 플립북 효과 코드 Sharing_javascript 기술다음 기사：Node.js 이미지 플립북 효과 코드 Sharing_javascript 기술

Textarea 텍스트 상자_javascript 기술에 줄 번호를 추가하는 JS 메서드

관련 기사