雪地跪求一个jquery或js问题。在线等待，高手进。

有一个需求是这样，页面有一个textarea 当textarea鼠标点击得到焦点后， 点击别的地方，比如点击一个select下拉框 选中一个点击之后 将内容插入到textarea焦点的地方， 主要是 点击下拉框的时候 textarea不要失去焦点 （在这个操作的过程中，textarea不能失去焦点） 请问如何做呢？ 辛苦各位大神了。。雪地跪求。

解决方案 »

  1.   

    失去焦点是肯定的，只是可以在点击textarea的时候记录textarea点击的焦点，然后供后面使用
      

  2.   

    谢谢这位朋友的回答，不过请问这位朋友，如何记录textarea得到的焦点呢？
      

  3.   

    响应点击事件。然后var elXY = Ext.fly(e.getTarget()).getXY()
      

  4.   

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    </head><body>
    <textarea style="width:300px; height: 200px;" id="textarea" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);"></textarea>
    <select id="select" onchange="insertAtCaret(this.value)">
    <option value="c">c</option>
    <option value="c++">c++</option>
    <option value="java">java</option>
    <option value="objective-c">objective-c</option>
    <option value="b">b</option>
    <option value="php">php</option>
    </select>
    <script language="javascript">
    var $ = function(n) {return document.getElementById(n);}
    function storeCaret(textEl) {
    if (textEl.createTextRange)
    textEl.caretPos = document.selection.createRange().duplicate();
    }
    function insertAtCaret(text) {
    var textEl = $('textarea');
    if (textEl.createTextRange && textEl.caretPos) {
    var caretPos = textEl.caretPos;
    caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text;
    } else textEl.value = text;
    textEl.focus();
    }
    </script>
    </body>
    </html>
      

  5.   

    你问题描述的还不够清楚.
    看你的问题描述,其实可以分两种情况
    1.有多个textarea 的情况下,你希望在点击以后textare之后,点击select的时候,选中的值可以回填到最后一次点击的textare里面.
       如果是这种情况的话,你完全可以在触发textarea单击事件里面,做个全局变量来保存这个obj的.在选中select的时候的触发事件里面,取出最后一次点击的textarea的对象,进行赋值操作.2.只有一个textarea的情况下,希望点击select以后,值回填到那个上面.
      这种的话就没什么难度了,完全可以不用去考虑textarea的焦点情况,在select事件里面直接赋值就可以了.希望对你有用
      

  6.   

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>测试</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript">
    </script>
    <script>
    (function($) {
    $.fn.extend({
    insertAtCaret: function(myValue) {
    var $t = $(this)[0];
    if (document.selection) {
    this.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
    this.focus();
    } else if ($t.selectionStart || $t.selectionStart == '0') {
    var startPos = $t.selectionStart;
    var endPos = $t.selectionEnd;
    var scrollTop = $t.scrollTop;
    $t.value = $t.value.substring(0, startPos) + myValue + $t.value.substring(endPos, $t.value.length);
    this.focus();
    $t.selectionStart = startPos + myValue.length;
    $t.selectionEnd = startPos + myValue.length;
    $t.scrollTop = scrollTop;
    } else {
    this.value += myValue;
    this.focus();
    }
    }
    })
    })(jQuery);
    </script>
    <script>
    function test(obj){
    var val=$("option:selected",$(obj)).text();
    $("textarea").insertAtCaret(val);
    }
    </script>
    </head><body>
    <textarea cols="50" rows="20"></textarea>
    <select onChange="test(this);">
    <option >option1</option>
    <option >option2</option>
    <option >option3</option>
    <option >option4</option>
    <option >option5</option>
    </select>
    </body>
    </html>别的插件，给你做了个demo，ie8、firefox和chrome下测试过