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

Posted 2023-04-01

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

【英文标题】：Identify the cursor position in different text area and insert text on selecting items in a listbox

【发布时间】：2012-10-23 21:53:16

【问题描述】：

谁能帮我解决这个问题？

我有一个设计有两个文本区域控件和一个列表框控件的 .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 中。但我希望文本位于包含光标位置的文本框中。 目前我在单个文本框中。我现在希望将文本显示在包含光标位置的两个文本框之一中。

如何做到这一点？

请帮帮我

【问题讨论】：

“光标位置”我认为你的意思是焦点，对吧？！

我刚刚将所选列表项的文本插入单个文本区域，如 $("#txtArea1").insertAtCaret($('#lis>option:selected').text( ));但现在我希望它为 if(txtArea1.gotfocus())insert to txtare1 else if(txtArea2.gotfocus())insert to txtarea 2

@roasted 获得 lastfocus 的文本框需要在单击列表框中的项目时插入文本。并且在页面加载时，最初必须将焦点设置为任何一个文本框？

当您单击列表项时，文本框无论如何都会失去焦点，即 txtArea1.gotfocus() 之类的内容将不起作用，因为它无论如何都没有焦点。

@techfoobar 是的，你说得对，我希望在任何文本区域的当前光标位置插入文本。现在总是发生在单个文本框上

【参考方案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());    
);

​

【参考方案2】：

一种可能的解决方案是为上次获得焦点的文本区域设置一个句柄，并在单击 lsit 项目时使用此句柄。

即像

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

然后做

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

用于设置文本。

【讨论】：

感谢您的回答，伙伴尝试了，但没有成功。总之非常感谢你的回答

【参考方案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/