在光标使用Javascript/jquery的位置插入文本

我有一个有很多文本框的页面。当有人单击链接时，我希望在光标所在的位置插入一两个单词，或将其附加到具有焦点的文本框中

例如，如果光标/焦点在一个写着“苹果”的文本框上，他点击了一个写着“电子邮件”的链接，那么我希望文本框写着“苹果”bob@example.com"

---

我该怎么做？这是可能的，因为如果焦点放在收音机/下拉菜单/非文本框元素上怎么办？上次聚焦的文本框能否被记住？

您只能聚焦所需的文本框，然后在其中插入文本。没有办法找出焦点在哪里（可能在所有DOM节点上交互？）

检查此stackoverflow-它为您提供了一个解决方案：

从以下位置使用：

函数insertcaret（区域ID，文本）{
var txtarea=document.getElementById（areaId）；
如果（！txtarea）{
返回；
}
var scrollPos=txtarea.scrollTop；
var-strPos=0；
var br=（（txtarea.selectionStart | | txtarea.selectionStart=='0'）？
“ff”：（document.selection？：即：false））；
如果（br==“ie”）{
txtarea.focus（）；
var range=document.selection.createRange（）；
range.moveStart（'character'，-txtarea.value.length）；
strPos=range.text.length；
}否则如果（br==“ff”）{
strPos=txtarea.selectionStart；
}
var front=（txtarea.value）.substring（0，strPos）；
var back=（txtarea.value）.substring（strPos，txtarea.value.length）；
txtarea.value=前面+文本+后面；
strPos=strPos+text.length；
如果（br==“ie”）{
txtarea.focus（）；
var ieRange=document.selection.createRange（）；
iRange.moveStart（'character'，-txtarea.value.length）；
iRange.moveStart（'character'，strPos）；
iRange.moveEnd（'character'，0）；
ieRange.select（）；
}否则如果（br==“ff”）{
txtarea.selectionStart=strPos；
txtarea.selectionEnd=strPos；
txtarea.focus（）；
}
txtarea.scrollpop=scrollPos；
}

---

我认为您可以使用以下JavaScript跟踪最后一个焦点文本框：

<script>
var holdFocus;

function updateFocus(x)
{
    holdFocus = x;
}

function appendTextToLastFocus(text)
{
    holdFocus.value += text;
}
</script>

var holdFocus；
函数updateFocus（x）
{
holdFocus=x；
}
函数appendTextToLastFocus（文本）
{
holdFocus.value+=文本；
}

用法：

<input type="textbox" onfocus="updateFocus(this)" />
<a href="#" onclick="appendTextToLastFocus('textToAppend')" />

---

以前的解决方案（gclaghorn的道具）使用textarea并计算光标的位置，因此它可能更符合您的需要。另一方面，如果这正是您所需要的，那么这个将更加轻量级。

上面的代码在IE中不适用于我。下面是一些基于的代码

我取出了

getElementById

，以便以不同的方式引用元素

函数insertcaret（元素，文本）{
if（文档选择）{
元素focus（）；
var sel=document.selection.createRange（）；
sel.text=文本；
元素focus（）；
}else if（element.selectionStart | | element.selectionStart==0）{
var startPos=element.selectionStart；
var endPos=element.selectionEnd；
var scrollTop=element.scrollTop；
element.value=element.value.substring（0，startPos）+
text+element.value.substring（endPos，element.value.length）；
元素focus（）；
element.selectionStart=startPos+text.length；
element.selectionEnd=startPos+text.length；
element.scrollTop=scrollTop；
}否则{
element.value+=文本；
元素focus（）；
}
}

输入{宽度：100px}
标签{显示：块；边距：10px 0}

从以下位置复制文本：
要插入的元素：
Insert（插入）

提供了一种预先制作的选择/插入符号操作方法。

如何通过JQuery和JavaScript将一些文本插入文本框的当前光标位置

过程

查找当前光标位置

获取要复制的文本

把文字放在那边

更新光标位置

这里我有两个文本框和一个按钮。我必须单击文本框上的某个位置，然后单击按钮粘贴文本框中的文本 将其他文本框移动到上一个文本框的位置

这里的主要问题是获取我们将粘贴文本的当前光标位置

//Textbox on which to be pasted
<input type="text" id="txtOnWhichToBePasted" />

//Textbox from where to be pasted
<input type="text" id="txtFromWhichToBePasted" />


//Button on which click the text to be pasted
<input type="button" id="btnInsert" value="Insert"/>


<script type="text/javascript">

$(document).ready(function () {
    $('#btnInsert').bind('click', function () {
            var TextToBePasted = $('#txtFromWhichToBePasted').value;
            var ControlOnWhichToBePasted = $('#txtOnWhichToBePasted');

            //Paste the Text
            PasteTag(ControlOnWhichToBePasted, TextToBePasted);
        });
    });

//Function Pasting The Text
function PasteTag(ControlOnWhichToBePasted,TextToBePasted) {
    //Get the position where to be paste

    var CaretPos = 0;
    // IE Support
    if (document.selection) {

        ControlOnWhichToBePasted.focus();
        var Sel = document.selection.createRange();

        Sel.moveStart('character', -ctrl.value.length);

        CaretPos = Sel.text.length;
    }
    // Firefox support
    else if (ControlOnWhichToBePasted.selectionStart || ControlOnWhichToBePasted.selectionStart == '0')
        CaretPos = ControlOnWhichToBePasted.selectionStart;

    //paste the text
    var WholeString = ControlOnWhichToBePasted.value;
    var txt1 = WholeString.substring(0, CaretPos);
    var txt2 = WholeString.substring(CaretPos, WholeString.length);
    WholeString = txt1 + TextToBePasted + txt2;
    var CaretPos = txt1.length + TextToBePasted.length;
    ControlOnWhichToBePasted.value = WholeString;

    //update The cursor position 
    setCaretPosition(ControlOnWhichToBePasted, CaretPos);
}

function setCaretPosition(ControlOnWhichToBePasted, pos) {

    if (ControlOnWhichToBePasted.setSelectionRange) {
        ControlOnWhichToBePasted.focus();
        ControlOnWhichToBePasted.setSelectionRange(pos, pos);
    }
    else if (ControlOnWhichToBePasted.createTextRange) {
        var range = ControlOnWhichToBePasted.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

</script>

//要粘贴的文本框
//要粘贴的文本框
//单击要粘贴的文本的按钮
$（文档）.ready（函数（）{
$（'#btn插入'）.bind（'click'，函数（）{
var texttobepated=$（“#txtFromWhichToBePasted'）。值；
var控制whichtobepasted=$（“#txtOnWhichToBePasted”）；
//粘贴文本
粘贴标签（要粘贴的控件，要粘贴的文本）；
});
});
//粘贴文本的函数
函数粘贴标签（要粘贴的控件，要粘贴的文本）{
//获取要粘贴的位置
var-CaretPos=0；
//IE支持
if（文档选择）{
控件粘贴到其中。focus（）；
var Sel=document.selection.createRange（）；
Sel.moveStart（'character'，-ctrl.value.length）；
CaretPos=Sel.text.length；
}
//Firefox支持
else if（control whichtobepasted.selectionStart | | control whichtobepasted.selectionStart==“0”）
CaretPos=要粘贴的控件。选择开始；
//粘贴文本
var INTERVISTRING=已粘贴的控件的值；
var txt1=整串子串（0，CaretPos）；
var txt2=整串子串（CaretPos，整串长度）；
整串=txt1+TextToBePasted+txt2；
var CaretPos=txt1.length+texttobepated.length；
控件，其中tobepasted.value=整串；
//更新光标位置
设置CaretPosition（要粘贴的控件，CaretPos）；
}
功能设置CaretPosition（要粘贴的控件，位置）{
if（要粘贴的控件。设置选择范围）{
控件粘贴到其中。focus（）；
设置选择范围（pos，pos）时要粘贴的控件；
}
else if（粘贴对象的控件。createTextRange）{
var range=controlwhichtobepasted.createTextRange（）；
if ($.browser.msie) 

if (br == "ie") { 

function insertAtCaret(areaId,text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var strPos = 0;
    var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? 
        "ff" : (document.selection ? "ie" : false ) );

    if ($.browser.msie) { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        strPos = range.text.length;
    }
    else if (br == "ff") strPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0,strPos);  
    var back = (txtarea.value).substring(strPos,txtarea.value.length); 
    txtarea.value=front+text+back;
    strPos = strPos + text.length;
    if (br == "ie") { 
        txtarea.focus();
        var range = document.selection.createRange();
        range.moveStart ('character', -txtarea.value.length);
        range.moveStart ('character', strPos);
        range.moveEnd ('character', 0);
        range.select();
    }
    else if (br == "ff") {
        txtarea.selectionStart = strPos;
        txtarea.selectionEnd = strPos;
        txtarea.focus();
    }
    txtarea.scrollTop = scrollPos;
}

function insertAtCaret(areaId, text) {
    var txtarea = document.getElementById(areaId);
    var scrollPos = txtarea.scrollTop;
    var caretPos = txtarea.selectionStart;

    var front = (txtarea.value).substring(0, caretPos);
    var back = (txtarea.value).substring(txtarea.selectionEnd, txtarea.value.length);
    txtarea.value = front + text + back;
    caretPos = caretPos + text.length;
    txtarea.selectionStart = caretPos;
    txtarea.selectionEnd = caretPos;
    txtarea.focus();
    txtarea.scrollTop = scrollPos;
}

function addTextAtCaret(textAreaId, text) {
    var textArea = document.getElementById(textAreaId);
    var cursorPosition = textArea.selectionStart;
    addTextAtCursorPosition(textArea, cursorPosition, text);
    updateCursorPosition(cursorPosition, text, textArea);
}
function addTextAtCursorPosition(textArea, cursorPosition, text) {
    var front = (textArea.value).substring(0, cursorPosition);
    var back = (textArea.value).substring(cursorPosition, textArea.value.length);
    textArea.value = front + text + back;
}
function updateCursorPosition(cursorPosition, text, textArea) {
    cursorPosition = cursorPosition + text.length;
    textArea.selectionStart = cursorPosition;
    textArea.selectionEnd = cursorPosition;
    textArea.focus();    
}

<div>
    <button type="button" onclick="addTextAtCaret('textArea','Apple')">Insert Apple!</button>
    <button type="button" onclick="addTextAtCaret('textArea','Mango')">Insert Mango!</button>
    <button type="button" onclick="addTextAtCaret('textArea','Orange')">Insert Orange!</button>
</div>
<textarea id="textArea" rows="20" cols="50"></textarea>

function insertAtCaret(el, text) {
    var caretPos = el.selectionStart;
    var textAreaTxt = el.value;
    el.value = textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};

element.setRangeText('abc');

element.setRangeText('abc', 3, 5);