javascript - 在 textarea 光标旁边设置 Bootstrap Popover 位置

Question

我正在使用引导弹出窗口向用户显示提示，他们可以在其中从列表中选择提示并将其插入到 textarea 中。他们可以使用按钮打开弹出框，也可以在文本区域中输入“%”字符时打开。弹出框打开良好，并位于弹出框链接（合并字段链接）旁边。但是当用户输入“%”字符时，我希望弹出框在光标旁边打开，而不是在弹出框链接旁边。请看图片

.

我一直在尝试，但我似乎无法找到一种方法来做到这一点。你们能不能帮我做这件事？我还添加了我的代码。

$(document).ready(function () {

        $("[data-toggle=popover]").popover();

        $('body').on('click', function (e) {
            $('[data-toggle=popover]').each(function () {
                // hide any open popovers when the anywhere else in the body is clicked
                if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
                    $(this).popover('hide');
                }
            });
        });

        
        $('#textMsgCandidateOverview').on('keypress', function (e) {
            if (e.keyCode === 37) {
                debugger;

                $('#linkPop').trigger('click');
            }

        });

        $('body').on('click', '#ulMergeField .list-group-item', function () {

            debugger
            var value = $(this).attr("id");
            $(this).parents('.popover').remove();
            var target = document.getElementById("textMsgCandidateOverview");
            start = target.selectionStart;
            if (target.setRangeText) {
                //if setRangeText function is supported by current browser
                target.setRangeText('%' + value + '%')
                target.focus();
                target.selectionEnd = start + 2 + value.length;
            }
            else {
                target.focus()
                document.execCommand('insertText', false /*no UI*/, '%' + value + '%');
            }

        });

    });

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

<div class="form-group row">
  <div class="col-md-12">
     <a id="linkPop" tabindex="0"
                       class="btn btn-sm btn-primary"
                       role="button"
                       data-html="true"
                       data-toggle="popover"
                       data-trigger="click"
                       data-content="<div class='form-group'><ul id='ulMergeField' class='list-group'><li id='contact_name' class='list-group-item border-0'> Contact name</li><li id='contact_first_name' class='list-group-item border-0'> Contact first name</li><li id='contact_last_name' class='list-group-item border-0'> Contact last name</li><li id='contact_email' class='list-group-item border-0'> Contact email</li><li id='contact_phone' class='list-group-item border-0'> Contact phone</li><li id='contact_address' class='list-group-item border-0'> Contact address</li><li id='agent_name' class='list-group-item border-0'> Agent name</li><li id='agent_first_name' class='list-group-item border-0'> Agent first name</li><li id='agent_last_name' class'list-group-item border-0' Agent last name</li><li id='agent_email' class='list-group-item border-0'> Agent email</li><li id='agent_phone' class='list-group-item border-0'> Agent phone</li></ul></div>">Merge Fields</a>                 
  </div>              
</div>
<textarea name="textMsg" id="textMsgCandidateOverview" class="form-control" placeholder="type starting with % for merge fields" required></textarea>

标签： javascriptjquerytwitter-bootstrappopoverbootstrap-popover