javascript - 将标签添加到 Textarea 后保持焦点

Question

我有这个 Js 模块，我在其中通过单击将标签添加到 Textarea。你可以在我的DEMO中看到它

现在的问题是当我添加标签时，它失去了 Textarea 的焦点，

例如，现在我点击了标签，然后我开始输入，它不会输入，因为我的光标不会出现在文本区域中。

我想要的是，当我添加标签时，光标或焦点应保留在文本区域中，这样我就不必在文本区域中单击即可键入。

这是我的 Fiddle

只需点击标签并继续输入，您就会找到我的问题

我也在这里证明我的代码:JS:

$('.tags').click(function (){
        var caretPos = document.getElementById("template_message").selectionStart;
        var textAreaTxt = $("#template_message").val();
        var txtToAdd = $(this).attr("id");
$("#template_message").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) );
    });

HTML:

<div class="tags_container">
<div> <strong> Add Tags: </strong><br /></div>

<li><a href="javascript:void(0);" class="tags" id="[OfferID]"><span >{Offer ID}</span></a></li>

<li><a href="javascript:void(0);" class="tags" id="[Username]"><span >{Username}</span></a></li>

<li><a href="javascript:void(0);" class="tags" id="[LoadingDate]"><span >{Loading Date}</span></a></li>

<li><a href="javascript:void(0);" class="tags" id="[DeliveryDate]"><span >{Delivery Date}</span></a></li>
</div>

<p>
    <textarea style="width:400px;height:100px" name="template_message" class="Required textfield" cols="40" rows="" id="template_message"></textarea>
</p>

注意:我不想把焦点放在最后，我希望焦点在我添加的标签之后，这样我就可以在同一个地方添加多个标签

Answer 1

看起来您需要一个函数来设置插入符号的位置。

复制自this forum :

function setCaretPosition(elemId, caretPos)
{
    var elem = document.getElementById(elemId);
    if(elem != null) {
        if(elem.createTextRange) {
            var range = elem.createTextRange();
            range.move('character', caretPos);
            range.select();
        }
        else {
            if(elem.selectionStart) {
                elem.focus();
                elem.setSelectionRange(caretPos, caretPos);
            }
            else
                elem.focus();
        }
    }
}

然后你可以调用它:

setCaretPosition("template_message", caretPos + txtToAdd.length);