將標籤添加到Textarea後保持焦點

我有這個Js模塊，我在其中通過單擊添加標籤到Textarea。你可以在我的演示中看到它將標籤添加到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>

注：我DONOT要重點在最後，我想重點標記，這是我加入後，使我可以在同一位置添加多個標籤

來源

2013-10-29 Hassan Sardar

看起來你會需要一個功能設置插入位置。

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

來源

2013-10-29 07:41:43

您能否更新我的小提琴？ –

完成：[http://jsfiddle.net/HPpZ8/16/](http://jsfiddle.net/HPpZ8/16/） –

只需添加重點放到textarea元素，

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

添加在小提琴一樣的：http://jsfiddle.net/HPpZ8/7/

希望這可以幫助你！

來源

2013-10-29 07:23:41

如果我添加一個標籤，光標應該留什麼標籤 –

@CodeHunter SE我的答案後。 – DannyThunder

我不希望焦點在最後，我希望焦點在標籤之後，我添加了，這樣我可以在同一個地方添加多個標籤 –

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

那代碼you're後，如果你想獲得光標集中在文本框中的文本的結尾： Fiddle

來源

2013-10-29 07:27:44 DannyThunder

我不希望焦點在最後，我希望焦點在標籤之後，我添加了，以便我可以在同一地點添加多個標籤 –

使用該信息/請求更新您的問題;-) – DannyThunder

完成請現在檢查我的帖子 –

將標籤添加到Textarea後保持焦點

回答

相關問題