jquery - 识别不同文本区域中的光标位置并在选择列表框中的项目时插入文本

Question

谁可以帮我这个事？

我得到了一个设计有两个文本区域控件和一个列表框控件的 .aspx 页面。

<td>
    <p>Base Entity Attributes</p>
    <select name="drop1" id="SelectGroupApiS" size="4">
    </select>
</td>
<td>
    <p>REQUEST XML</p>
    <textarea id="txtAreaRequest" rows="" cols=""></textarea>
</td>
<td>
    <p>RESPONSE XML</p>
    <textarea id="txtAreaResponse" rows="" cols=""></textarea>
</td>

当我单击任何列表框项目时，我使用 jquery 将 listitem 的当前文本置于 TextArea 中。但我希望文本位于包含光标位置的文本框中。目前我在单个文本框中。我现在希望将文本显示在包含光标位置的两个文本框之一中。

怎么做才能让它发生？

请帮帮我

Answer 1

一种可能的解决方案是拥有最后一个焦点的文本区域的句柄，并在单击 lsit 项目时使用此句柄。

即类似的东西

var $focusTA = null;
$('textarea').focus(function() {
    $focusTA = $(this);
});

做

$focusTA.insertAtCaret($('#lis>option:selected').text());

用于设置文本。

Answer 2

小提琴http://jsfiddle.net/tariqulazam/LBkcV/

HTML

<td>
    <p>Base Entity Attributes</p>
    <select name="drop1" id="SelectGroupApiS" size="4">
        <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
    </select>
</td>
<td>
    <p>REQUEST XML</p>
    <textarea id="txtAreaRequest" class="tarea" rows="" cols=""></textarea>
</td>
<td>
    <p>RESPONSE XML</p>
    <textarea id="txtAreaResponse" class="tarea" rows="" cols=""></textarea>
</td>​

JavaScript

var activeArea;
$(document).ready(function(){
    activeArea = $("#txtAreaRequest");
});
$(".tarea").click(function(){
    activeArea = $(this);
}).focus(function(){
    activeArea = $(this);
});

$("#SelectGroupApiS").change(function(){
    $(activeArea).append($("#SelectGroupApiS option:selected").val());    
});

​</p>

Answer 3

如果我正确理解你的问题，你可以这样做：

$(document).ready(function(){$('#txtAreaRequest').focus()});

var dataTB = [];
$('textarea').blur(function() {
    dataTB[0] = this;
    dataTB[1] = getCaret(this);
});

$('#SelectGroupApiS').change(function() {
    var valTB =  $(dataTB[0]).val();    $(dataTB[0]).val(valTB.substring(0,dataTB[1])+$('option:selected',this).text()+valTB.substring(dataTB[1]));

});



function getCaret(node) {
    if (node.selectionStart) {
        return node.selectionStart;
    } else if (!document.selection) {
        return 0;
    }

    var c = "\001",
        sel = document.selection.createRange(),
        dul = sel.duplicate(),
        len = 0;

    dul.moveToElementText(node);
    sel.text = c;
    len = dul.text.indexOf(c);
    sel.moveStart('character', -1);
    sel.text = "";
    return len;
}

见http://jsfiddle.net/mcDhE/