在文本框的光标处插入指定的文本（兼容IE6和Firefox）

昨天有人问我这个事，今天就来做做了，最开始是按自己的思路做，在keyup事件里对输入键做判断，以处理什么退格啊，删除啊，上下左右移动等动作，然后记录光标位置来做文本处理，费了好大劲。不过后来无意中发现了【孟子E章】的一个解决方案，简洁有效。

本着研究学习的目的，我对【孟子E章】的方法做了个封装，这样在使用时会简单一些，尤其是需要插入的标签较多时。

这是调用代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

window.onload = function()

{

var ci = new CursorInsert();

ci.SetTargetTextControl(document.getElementById('txtContent'));

ci.SetSourceControl(document.getElementById('btnSource'), '[note]NOTE[/note]');

ci.Initialize();

}

</script>

</head>

<body>

</form>

</body>

</html>

这是封装后的类：

var CursorInsert = function ()

{

this.targetTextControl = null;

this.sourceControls = new Array();

this.SetTargetTextControl = function(ctrl)

{

this.targetTextControl = ctrl;

}

this.SetSourceControl = function(ctrl,value)

{

this.sourceControls[this.sourceControls.length] = {"Button" : ctrl , "Value" : value};

}

this.Initialize = function()

{

if (this.targetTextControl == null)

{

alert("Please set target text control first!");

return ;

}

if (this.sourceControls.length == 0)

{

alert("Please set source control first!");

return ;

}

this.SetText(this.targetTextControl);

for (var i = 0; i < this.sourceControls.length; i++)

{

this.SetButton(this.sourceControls[i].Button,this.sourceControls[i].Value,this.targetTextControl);

}

this.SetButton = function(btn,value,target)

{

var ctrl = target == null ? this.TextControl : target ;

btn.onclick = function()

{

CursorInsert.prototype.InsertAtCaret(target,value);

}

this.SetText = function(ctrl)

{

ctrl.onselect = function()

{

CursorInsert.prototype.SetCaret(this);

}

ctrl.onclick = function()

{

CursorInsert.prototype.SetCaret(this);

}

ctrl.onkeyup = function()

{

CursorInsert.prototype.SetCaret(this);

}

CursorInsert.prototype.SetCaret = function(textObj)

{

if (textObj.createTextRange)

{

textObj.caretPos = document.selection.createRange().duplicate();

}

CursorInsert.prototype.InsertAtCaret = function(textObj,value)

{

if(document.all)

{

if (textObj.createTextRange && textObj.caretPos)

{

var caretPos = textObj.caretPos;

caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? value + ' ' : value;

}

else

{

textObj.value = value;

}

else

{

if(textObj.setSelectionRange)

{

var rangeStart = textObj.selectionStart;

var rangeEnd = textObj.selectionEnd;

var tempStr1 = textObj.value.substring(0,rangeStart);

var tempStr2 = textObj.value.substring(rangeEnd);

textObj.value = tempStr1 + value + tempStr2;

}

else

{

alert("This version of Mozilla based browser does not support setSelectionRange!");

}

posted on 2008-06-11 16:44 非我阅读(1419) 评论(4) 编辑收藏举报