前面一篇是插入固定值，更多的考虑到类似在插入表情这样的需求，今天又碰到另一个朋友问我另一种方式，于是顺便研究了下另一种在光标处插入文本的办法。
var TextAreaPosition = function(tb)
{
this.textBox = tb;
this.start = 0;
this.end = 0;
this.InitEvent = function(obj)
{
function savePos()
{
obj.savePosition(this);
}
this.textBox.onkeydown = savePos;
this.textBox.onkeyup = savePos;
this.textBox.onmousedown = savePos;
this.textBox.onmouseup = savePos;
this.textBox.onfocus = savePos;
}
this.InsertString = function(str)
{
var pre = this.textBox.value.substr(0, this.start);
var post = this.textBox.value.substr(this.end);
this.textBox.value = pre + str + post;
}
this.savePosition = function(textBox)
{
if(typeof(this.textBox.selectionStart) == "number")
{
this.ff15();
}
else if(document.selection)
{
this.ie6();
}
}
this.ff15 = function()
{
this.start = this.textBox.selectionStart;
this.end = this.textBox.selectionEnd;
}
this.ie6 =function()
{
var range = document.selection.createRange();
if(range.parentElement().id == this.textBox.id)
{
var range_all = document.body.createTextRange();
range_all.moveToElementText(this.textBox);
for (this.start=0; range_all.compareEndPoints("StartToStart", range) < 0; this.start++)
{
range_all.moveStart('character', 1);
}
for (var i = 0; i <= this.start; i ++)
{
if (this.textBox.value.charAt(i) == '\n') this.start++;
}
var range_all = document.body.createTextRange();
range_all.moveToElementText(this.textBox);
for (this.end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; this.end ++)
{
range_all.moveStart('character', 1);
}
for (var i = 0; i <= this.end; i ++)
{
if (this.textBox.value.charAt(i) == '\n') this.end ++;
}
}
}
this.InitEvent(this);
}
测试：
<html>
<head>
<title>TEST</title>
<script src="1.js" type="text/javascript"></script>
<script type="text/javascript">
var tp;
function Add()
{
tp.InsertString(document.getElementById("inputtext").value);
}
window.onload = function()
{
tp = new TextAreaPosition(document.getElementById("ta"));
}
</script>
</head>
<body>
<textarea id="ta" rows="14" cols="50"></textarea><br/>
<input type="text" id="inputtext" />
<input type="button" onclick="Add()" value="Add Text"/>
</body>
</html>
var TextAreaPosition = function(tb){
this.textBox = tb; this.start = 0; this.end = 0; this.InitEvent = function(obj) {
function savePos() { obj.savePosition(this); } this.textBox.onkeydown = savePos; this.textBox.onkeyup = savePos; this.textBox.onmousedown = savePos; this.textBox.onmouseup = savePos; this.textBox.onfocus = savePos; } this.InsertString = function(str) { var pre = this.textBox.value.substr(0, this.start); var post = this.textBox.value.substr(this.end); this.textBox.value = pre + str + post; } this.savePosition = function(textBox) { if(typeof(this.textBox.selectionStart) == "number") { this.ff15(); } else if(document.selection) { this.ie6(); } } this.ff15 = function() { this.start = this.textBox.selectionStart; this.end = this.textBox.selectionEnd; } this.ie6 =function() { var range = document.selection.createRange(); if(range.parentElement().id == this.textBox.id) { var range_all = document.body.createTextRange(); range_all.moveToElementText(this.textBox); for (this.start=0; range_all.compareEndPoints("StartToStart", range) < 0; this.start++) { range_all.moveStart('character', 1); } for (var i = 0; i <= this.start; i ++) { if (this.textBox.value.charAt(i) == '\n') this.start++; } var range_all = document.body.createTextRange(); range_all.moveToElementText(this.textBox); for (this.end = 0; range_all.compareEndPoints('StartToEnd', range) < 0; this.end ++) { range_all.moveStart('character', 1); } for (var i = 0; i <= this.end; i ++) { if (this.textBox.value.charAt(i) == '\n') this.end ++; } } } this.InitEvent(this);}<html><head><title>TEST</title><script src="1.js" type="text/javascript"></script><script type="text/javascript"> var tp; function Add() { tp.InsertString(document.getElementById("inputtext").value); } window.onload = function() { tp = new TextAreaPosition(document.getElementById("ta")); } </script></head><body><textarea id="ta" rows="14" cols="50"></textarea><br/><input type="text" id="inputtext" /><input type="button" onclick="Add()" value="Add Text"/></body></html>
