前面一篇是插入固定值，更多的考虑到类似在插入表情这样的需求，今天又碰到另一个朋友问我另一种方式，于是顺便研究了下另一种在光标处插入文本的办法。
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>
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。