关于JS定位textarea光标的问题

首先发表一个不幸的声明，本人搞PHP 1年半了，在这个大过年里，我们组长和我说公司老总说，PHP项目不赚钱，马上要解散了，1月15号 PHP项目组 统统滚蛋，好吧 大过年里 说好的项目奖金也没了，说好的年总奖也没了，技术总监也走了，好吧，我还有什么资格说我不走呢。回家别人问我 你现在在哪工作啊，做什么的啊？我该怎么回答？说我被开除了？好吧 以上悲伤发泄之后解决本人在公司遇到的最后一个技术问题，然后准备打酱油等着滚蛋。我现在要做一个后台生成标签代码插入模版的功能，如图当我点击插入标签的时候 会打开一个IFRAME  然后上面各种选项之后生成个标签然后插入到开始那个textarea 中的光标位置，
本人JS不行，也在CSDN上面看到的一个JS
如下
function  insertText(charvalue)   
 {   
  var obj = document.getElementById("templateContent");
    obj.focus();  
    var leng=obj.value.length;
    if(typeof document.selection !="undefined")   //ie
    {
      var r =document.selection.createRange();   
      r.text   =   charvalue;   
    }
    else                                       //firefox
    {
      obj.value=obj.value.substr(0,obj.selectionStart)+ charvalue +obj.value.substring(obj.selectionStart,leng);
    }         
 }   我的原理是在上面生成标签的同时，调用这个函数插入到textarea 的光标位置中，以上经测试火狐浏览器是没有问题的，但是在IE浏览器下，点击插入标签 在打开的窗口上面， 如果鼠标不点击文本框出现光标 ，可以插入到textarea的光标位置，但是如果鼠标点击了窗口中的文本框出现了光标，生成的标签会插入到textarea的最开始位置 好吧 不知道你们可能看懂我的描述 不理解可以留下言 求解决IE下兼容的JS 该咋写

解决方案 »

  1.   


    bless，也许下一站会更好。
    可能是  obj.focus(); 的问题，ie下去掉这句也许就会好了。
      

  2.   

    我又试了下，没有问题啊
    <html>
    <head>
    <script type="text/javascript">
    function  insertText(charvalue)   
     {   
      var obj = document.getElementById("templateContent");
        obj.focus();  
        var leng=obj.value.length;
        if(typeof document.selection !="undefined")   //ie
        {
          var r =document.selection.createRange();   
          r.text   =   charvalue;   
        }
        else                                       //firefox
        {
          obj.value=obj.value.substr(0,obj.selectionStart)+ charvalue +obj.value.substring(obj.selectionStart,leng);
        }         
     }   
    </script>
    </head>
    <body>
    <textarea id ="templateContent"></textarea>
    <input type="button" value="测试" onclick="insertText('的说法的撒范德萨发生的  倒萨发第三方的萨菲撒旦法倒萨范德萨倒萨发斯蒂芬')"/>
    </body>
    </html>难道是浏览器版本问题，ie9没有问题
      

  3.   

    用这个jquery 扩展
    jQuery.fn.extend({
    insertAtCaret: function(myValue){
      return this.each(function(i) {
        if (document.selection) {
          //For browsers like Internet Explorer
          this.focus();
          sel = document.selection.createRange();
          sel.text = myValue;
          this.focus();
        }
        else if (this.selectionStart || this.selectionStart == '0') {
          //For browsers like Firefox and Webkit based
          var startPos = this.selectionStart;
          var endPos = this.selectionEnd;
          var scrollTop = this.scrollTop;
          this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
          this.focus();
          this.selectionStart = startPos + myValue.length;
          this.selectionEnd = startPos + myValue.length;
          this.scrollTop = scrollTop;
        } else {
          this.value += myValue;
          this.focus();
        }
      })
    }
    });
    $('#element1).insertAtCaret('text');
      

  4.   

    ie下要保存rang对象textarea失去焦点的前，参考：IE下未选择textarea的内容时如何保存Range对象
      

  5.   


    你没用对而已。。参考下面的这个例子修改<input type="button" onclick="pop()" value="弹出层" />
    <textarea id="txt">11111111111111</textarea>
    <script type="text/javascript">
        var rng;
        function pop() {
            if (document.all) {//IE要保存Range
                var txt = document.getElementById('txt');
                txt.focus(); 
                rng = document.selection.createRange();
            }
            document.getElementById('dvPop').style.display = 'block';
        }
        function Insert(o) {
            if (o.value == '') { alert('请输入内容！'); o.focus(); return; }
            var txt = document.getElementById('txt');
            txt.focus();
            if (rng) {
                rng.text = o.value;
                rng.select();
            }
            else {
                var v = txt.value, start = txt.selectionStart, end = txt.selectionEnd;
                txt.value = v.substring(0, start) + o.value + v.substring(end);
            }
            o.parentNode.style.display = 'none';
        }
    </script> 
    <div id="dvPop" style="position:absolute;left:100px;top:100px;height:100px;width:200px;background:#fff;border:solid 1px black;display:none">
    <input type="text" /><input type="button" value="在textarea中插入输入框内容" onclick="Insert(this.previousSibling)" />
    </div>
      

  6.   


    首先非常感谢你的无私奉献精神，如果在同一个页面是可以的，但是现在有个问题是 我们那个打开的层是个IFRAME  不是一个隐藏层 这就导致了 JS的保存光标的对象 找不到 
      

  7.   


    一样的。。你iframe调用父页注册的事件举行了。。如iframe中点击按钮使用parent.xxxFunction(v)父页注册xxxFunction就行了，iframe父页关系
      

  8.   

    看了下， 视乎 如果 先把光标 点到 要插入的位置 然后弹出 IFRAME 如果 先弹出 IFRAME   然后在点光标 就会无法定位到光标 你是说的这个问题吗？
      

  9.   

    万分感谢 问题已经解决了 仿照你的我将代码改为 var r;
       function pop() {
        if (document.all) {//IE要保存Range
         var obj = document.getElementById('templateContent');
          obj.focus(); 
          r = document.selection.createRange();
        }
       }
     function  insertText(charvalue)   
     {   
      var obj = document.getElementById("templateContent");
        obj.focus();  
        var leng=obj.value.length;
        if(typeof document.selection !="undefined")   //ie
        {
          r.text = charvalue;
          r.select();
        }
        else                                       //firefox
        {
          obj.value=obj.value.substr(0,obj.selectionStart)+ charvalue +obj.value.substring(obj.selectionStart,leng);
        }         
     }   后可以使用了 谢谢了 回答问题很敬业 也很有耐心