1

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

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

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

我想要的是，当我添加标签时，光标或焦点应该保留在 textarea 中，这样我就不必单击 textarea 来输入。

这是我的小提琴

简单点击标签并继续输入，你会得到我的问题

我也在这里证明我的代码：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>

注意：我不想在末尾聚焦，我希望在我添加的标签之后聚焦，这样我就可以在同一个地方添加多个标签

4

3 回答 3

1

只需将焦点添加到 textarea 元素中，

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

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

希望它可以帮助你！

于 2013-10-29T07:23:41.660 回答
1

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

从这个论坛复制：

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);
于 2013-10-29T07:41:43.097 回答
0 
$("#template_message").focus().val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));

如果您想让光标聚焦在文本框中文本的末尾，那就是您所追求的代码： 小提琴

于 2013-10-29T07:27:44.770 回答