问题描述
我正在使用引导程序弹出窗口向用户显示提示,他们可以从列表中选择提示并将其插入到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>
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)