javascript implements the indentation of tab key in textarea
- 2020-06-22 23:49:01
- OfStack
The example of javascript illustrates the indentation method of tab key in textarea. Share to everybody for everybody reference. The details are as follows:
Search the Internet for 1 related solution, others use 2 or 3 lines of javascript solution, but all have 1 minor problem. And JQuery, which is also very concise.
The javascript code in this article implements the ability to enter the TAB key in TEXTAREA and indent it automatically. However, this code does not execute properly in the Google browser
sel =event.srcElement.document.selection.createRange()
This one will make an error:
ncaught exception TypeError: Cannot read property 'selection' of undefined
The code executes normally in IE as follows:
<mce:script type="text/javascript">
<!--
function editTab()
{
var code, sel, tmp, r
var tabs=""
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 (var i=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>
When using:
<textarea cols=80 rows=20 name="input" onkeydown="editTab()"></textarea>
I hope this article has been helpful for your javascript programming.