前面一篇是插入固定值,更多的考虑到类似在插入表情这样的需求,今天又碰到另一个朋友问我另一种方式,于是顺便研究了下另一种在光标处插入文本的办法。
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(0this.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) < 0this.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) < 0this.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>
posted on 2008-07-17 17:20  非我  阅读(1070)  评论(0编辑  收藏  举报