cari

Rumah >hujung hadapan web >tutorial js >Kaedah JS untuk menambah nombor baris pada kemahiran text box_javascript Textarea

Kaedah JS untuk menambah nombor baris pada kemahiran text box_javascript Textarea

WBOY
WBOYasal
2016-05-16 15:43:591646semak imbas

Contoh dalam artikel ini menerangkan cara menambah nombor baris pada kotak teks Textarea menggunakan JS. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kita menggunakan JS untuk merealisasikan fungsi memaparkan nombor baris dalam kotak teks Textarea Akan ada nombor siri berangka di hadapan setiap baris Jika ia digunakan untuk memaparkan kod, anda boleh mencari yang tertentu baris. Jika nombor baris tidak dipaparkan, anda perlu melakukannya sendiri. Jika anda mahu fungsi ini, anda hanya perlu menetapkan ID TextArea dan menambah bahagian kod JavaScript daripada kotak teks dikawal oleh CSS Anda boleh cuba mengubahnya. Lebar paparan harus sepadan dengan JS.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut: 

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：js imej flip book kesan kod kemahiran_javascriptArtikel seterusnya：js imej flip book kesan kod kemahiran_javascript

Artikel berkaitan

Lihat lagi