1

私はこのJsモジュールを持っており、タグをクリックしてTextareaに追加しています。あなたは私のDEMOでそれを見ることができます

問題は、 tag を追加すると、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

テキストエリア要素にフォーカスを追加するだけで、

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

フィドルに同じものを追加しました：http://jsfiddle.net/HPpZ8/7/

それがあなたを助けることを願っています!!

于 2013-10-29T07:23:41.660 に答える
0 
$("#template_message").focus().val(textAreaTxt.substring(0, caretPos) + txtToAdd + textAreaTxt.substring(caretPos));

カーソルをテキストボックス内のテキストの最後にフォーカスさせたい場合は、次のコードが必要です: Fiddle

于 2013-10-29T07:27:44.770 に答える