本文實(shí)例講述了JS給Textarea文本框添加行號(hào)的方法。分享給大家供大家參考。具體如下：
這里使用JS實(shí)現(xiàn)讓Textarea文本框顯示行號(hào)的功能，每一行的前面都會(huì)有下數(shù)字序號(hào)，如果用來(lái)顯示代碼的話，可以直接找到某一行，如果不顯示行號(hào)，則還要自己手功去查，想要此功能，你只需設(shè)置好TextArea ID，并加入代碼中的JavaScript代碼部分即可，文本框的長(zhǎng)寬則是由CSS來(lái)控制的，你可試著修改一下，長(zhǎng)寬的顯示要與JS相匹配。
運(yùn)行效果截圖如下：
在線演示地址如下：
http://demo.VeVB.COm/js/2015/js-textarea-show-row-num-codes/
具體代碼如下：
<html> <head><title>Js給文本框添加行號(hào)功能</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>希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
