在文本区域中启用制表符
当用户在浏览器窗口中按下Tab键时,通常的操作是使用户将焦点移到其他控件上。要在文本区域中启用诸如Tab效果的文字处理程序,您需要捕捉按键并将Tab字符添加到光标所在的位置。这是创建此解决方案的主要问题,很容易在文本末尾添加标签,但是大多数用户可能希望在文本中间添加标签。
采取以下HTML文本区域。
当检测到击键时,它将运行该catchTab()功能。此函数检测击键是否为9(这意味着它是一个制表符),并运行调用的函数replaceSelection()以找出光标在哪里并替换那里的文本。
function catchTab(item,e){ if(navigator.userAgent.match("Gecko")){ c=e.which; }else{ c=e.keyCode; } if(c==9){ replaceSelection(item,String.fromCharCode(9)); document.getElementById(item.id).focus(); return false; } } function setSelectionRange(input, selectionStart, selectionEnd){ if(input.setSelectionRange){ input.focus(); input.setSelectionRange(selectionStart, selectionEnd); }else if(input.createTextRange){ var range = input.createTextRange(); range.collapse(true); range.moveEnd('character', selectionEnd); range.moveStart('character', selectionStart); range.select(); } } function replaceSelection(input, replaceString){ if(input.setSelectionRange){ var selectionStart = input.selectionStart; var selectionEnd = input.selectionEnd; input.value= input.value.substring(0, selectionStart)+ replaceString + input.value.substring(selectionEnd); if(selectionStart != selectionEnd){ setSelectionRange(input, selectionStart, selectionStart + replaceString.length); }else{ setSelectionRange(input, selectionStart + replaceString.length, selectionStart + replaceString.length); } }else if(document.selection){ var range = document.selection.createRange(); if(range.parentElement() == input){ var isCollapsed =range.text== ''; range.text= replaceString; if(!isCollapsed){ range.moveStart('character', -replaceString.length); range.select(); } } } }
通过使用这些功能,文本区域的作用将更像是文字处理器。