javascript实现textarea中tab键的缩排处理方法
本文实例讲述了javascript实现textarea中tab键的缩排处理方法。分享给大家供大家参考。具体如下:
网上搜索了一下相关的解决方法,其它的有使用两三行javascript解决的,但都有一些小小的问题。还有使用JQuery的,也非常简洁。
本文的javascript代码实现了在TEXTAREA中输入TAB键并自动缩进的功能。不过这段代码在谷歌浏览器中不能正常执行,在
sel=event.srcElement.document.selection.createRange()
这一句会发生错误:
ncaughtexceptionTypeError:Cannotreadproperty'selection'ofundefined
代码在IE中正常执行,如下:
<mce:scripttype="text/javascript"> <!-- functioneditTab() { varcode,sel,tmp,r vartabs="" event.returnValue=false sel=event.srcElement.document.selection.createRange() r=event.srcElement.createTextRange() switch(event.keyCode) { case(8): if(!(sel.getClientRects().length>1)) { event.returnValue=true return } code=sel.text tmp=sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left,sel.getClientRects()[0].top) sel.setEndPoint("startToStart",tmp) sel.text=sel.text.replace(/^/t/gm,"") code=code.replace(/^/t/gm,"").replace(//r/n/g,"/r") r.findText(code) r.select() break case(9): if(sel.getClientRects().length>1) { code=sel.text tmp=sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left,sel.getClientRects()[0].top) sel.setEndPoint("startToStart",tmp) sel.text="/t"+sel.text.replace(//r/n/g,"/r/t") code=code.replace(//r/n/g,"/r/t") r.findText(code) r.select() } else { sel.text="/t" sel.select() } break case(13): tmp=sel.duplicate() tmp.moveToPoint(r.getBoundingClientRect().left,sel.getClientRects()[0].top) tmp.setEndPoint("endToEnd",sel) for(vari=0;tmp.text.match(/^[/t]+/g)&&i<tmp.text.match(/^[/t]+/g)[0].length;i++)tabs+="/t" sel.text="/r/n"+tabs sel.select() break default: event.returnValue=true break } } //--> </mce:script>
使用时:
<textareacols=80rows=20name="input"onkeydown="editTab()"></textarea>
希望本文所述对大家的javascript程序设计有所帮助。