让TextArea支持Tab键（兼容IE、FF）

显示列表



让TextArea支持Tab键（兼容IE、FF）

2009-03-28
http://www.huanghengxu.com/Html/Article/125.htm
<script language="JavaScript">

<!--

var TextAreaTab =

{

Register : function(obj)

{

// 绑定事件

obj.onclick = new Function('TextAreaTab.CreateInsertPosition(this)');

obj.onselect = new Function('TextAreaTab.CreateInsertPosition(this)');

obj.onkeyup = new Function('TextAreaTab.CreateInsertPosition(this)');

obj.onkeydown = new Function('TextAreaTab.InsertTab(this)');

},

// 这个只对ie有用

// 创建光标所在位置的对象，就是要插入的位置。

// 其实就是光标选中的对象，对它进行操作就可以了。

CreateInsertPosition : function(obj)

{

if (obj.createTextRange) // IE

{

obj.InsertPosition = document.selection.createRange().duplicate(); // 光标选中的对象

}

},

InsertTab : function(obj)

{

var evt = this.GetEvent(); // 返回 event 对象

if (evt.keyCode == 9) // 按下了Tab键

{

if (obj.createTextRange && obj.InsertPosition) // IE

{

// 赋予对象内容

obj.InsertPosition.text = '/t';

evt.returnValue = false;

}

else if (window.getSelection) // FF

{

var scrollTop = obj.scrollTop; // 滚动的位置

var start = obj.selectionStart; // 当前光标所在位置

var pre = obj.value.substr(0, obj.selectionStart); // 光标之前的内容

var next = obj.value.substr(obj.selectionEnd); // 光标之后的内容

obj.value = pre + '/t' + next;

evt.preventDefault();

// 设置光标在插入点之后的位置

obj.selectionStart = start + 1;

obj.selectionEnd = start + 1;

obj.scrollTop = scrollTop;

}

}

},

// 返回 event 对象

GetEvent : function()

{

if(document.all) // IE

{

return window.event;

}

func = this.GetEvent.caller;

while(func != null)

{

var arg0 = func.arguments[0];

if(arg0)

{

if((arg0.constructor == Event || arg0.constructor == MouseEvent)

||(typeof(arg0) == "object" && arg0.preventDefault && arg0.stopPropagation))

{

return arg0;

}

}

func = func.caller;

}

return null;

}

}

//-->

</script>

<textarea id="TextArea" rows="10" cols="50"></textarea>

<script language="JavaScript">

<!--

var textarea = document.getElementById('TextArea');

TextAreaTab.Register(textarea); // 注册一下对象，就可以让这个对象现实Tab功能

//-->

</script>