这个问题演变成了阻止按下回车键时打开下拉菜单。正如你所看到的，我丑陋的解决方案用一个关闭下拉菜单setTimeout当标签输入具有焦点时按 Enter 键。如何防止它在输入时完全打开，而不是在打开后关闭它？
以下是一些可能有用的事件：https://select2.org/programmatic-control/events https://select2.org/programmatic-control/events
var tagClick = false;
$(document).on('mousedown touchstart', '.tag', function(e) {
var $self = $(this);
tagClick = true;
});
$(document).on('click', '.tag', function(e) {
var $self = $(this);
var $input = $self.find('input');
$input.select();
});
$(document).on('blur', '.tag input', function(e) {
var $self = $(this);
$self.attr('value', $self.val());
setTimeout(function() {
$(".tags").select2('close');
}, 100);
// Save to db here
});
$(document).on('keydown', '.tag input', function(e) {
var nl = e.keyCode == 13; // is enter?
var $self = $(this);
if( nl )
{
$self.blur();
}
});
$(".tags").select2({
templateSelection: function(argSelection)
{
return $.parseHTML('<span class="tag">'+(argSelection.name || argSelection.text)+'<input type="text" value="" /></span>');
},
tags: true,
width: '100%'
})
.on('select2:opening', function (e) {
var $self = $(this);
if( tagClick )
{
e.preventDefault();
tagClick = false;
}
})
.tag input {
width: 50px;
height: 10px;
margin-left: 5px;
}
.tag input[value=""]:not(:focus) {
width: 0;
margin-left: 0;
background: transparent;
border: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<select class="tags" multiple="multiple">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
阅读了一些有关的文档后事件监听器 https://select2.org/programmatic-control/events#listening-for-events，我编写了这段代码，该代码仅在您单击叉号删除标签时才起作用，请指定您是否希望在整个标签被单击时阻止下拉菜单，我会查看它，这是代码，基本上，我们'重新审理select2:unselecting事件并通过阻止其正确的打开事件触发来阻止下拉菜单显示：
$(".tags").on('select2:unselecting', function (e) {
$(".tags").on('select2:opening', function (ev) {
ev.preventDefault();
$(".tags").off('select2:opening');
});
});
下面的工作片段：
$(".tags").select2({
tags: true,
width: '100%'
});
$(".tags").on('select2:unselecting', function (e) {
$(".tags").on('select2:opening', function (ev) {
ev.preventDefault();
$(".tags").off('select2:opening');
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/js/select2.min.js"></script>
<select class="tags" multiple="multiple">
<option selected="selected">orange</option>
<option>white</option>
<option selected="selected">purple</option>
</select>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
