昨天有人问我这个事，今天就来做做了，最开始是按自己的思路做，在keyup事件里对输入键做判断，以处理什么退格啊，删除啊，上下左右移动等动作，然后记录光标位置来做文本处理，费了好大劲
。不过后来无意中发现了【孟子E章】的一个解决方案，简洁有效
。
本着研究学习的目的，我对【孟子E章】的方法做了个封装，这样在使用时会简单一些，尤其是需要插入的标签较多时。
这是调用代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>无标题页</title> <script type = "text/javascript" src = "JScript.js"></script> <script type="text/javascript"> 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 id="form1" runat="server"> <textarea id = "txtContent" cols = "1" rows = "1" style = "width:500px;height:300px;"></textarea><br /> <input id = "btnSource" type = "button" value = "Click me" /> </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!"); } } }
