Question

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

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

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

我想要的是当我添加标签时，光标或焦点应该保留在textarea中，这样我就不必单击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

只需将焦点添加到textarea元素

即可

$("#template_message").val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos) ).focus();

在小提琴中添加了相同内容：http://jsfiddle.net/HPpZ8/7/

希望它可以帮到你!!

Answer 2

看起来你需要一个函数来设置插入位置。

从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);

Answer 3

$("#template_message").focus().val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));

如果你想让光标聚焦在文本框中文本的末尾，那就是你之后的代码： Fiddle

将Tag添加到Textarea后保持焦点

3 个答案: