确定在不同文本区域中的光标位置，并在列表框中选择项目时插入文本

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>

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

如何做到这一点？

帮助我plss

Answer 1

小提琴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());    
});

Answer 2

一种可能的解决方案是在单击LSIT项目时具有焦点并使用此手柄的文本方案。

即。像

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

和做

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

用于设置文本。

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 = "01",
        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/