在文本区域中启用制表符
当用户在浏览器窗口中按下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();
}
}
}
}通过使用这些功能,文本区域的作用将更像是文字处理器。