如何避免Kendo Multiselect在焦点丢失时清除输入

Question

我正在使用JQuery的Kendo UI，并在下面的示例中声明了一个multiselect作为TagBox。

我注意到，每当组件失去焦点时，键入的内容都会被清除。我希望避免这种行为，因为每当用户在多选框外点击时，强迫用户重新键入他们所拥有的内容会很烦人。

我试着这样做：

$('.email_notification_create .k-multiselect .k-input').unbind('blur');
$('.email_notification_create .k-multiselect .k-input').on('blur', function(){
console.log(currentEmailInput.val());
console.log('overriden blur');
});

但是输入上的值已经被清除，所以当焦点丢失时，其他人正在清除输入。

如何阻止Multiselect清除其输入？

Answer 1

由于您已经在keyup上定义了function，您可以在其中添加其他部分，以获得用户键入的最后一个值，并将它们存储在某个全局变量中。然后，您可以使用focusout事件，这样当输入散焦时，就会在里面定义一些函数，将values分配给您的输入框，并更改其width。

演示代码 :

var valuess; //declare this
var widths; //and this
var currentId = 1;
function onDataBound(e) {
$('.k-multiselect .k-input').unbind('keyup');
$('.k-multiselect .k-input').on('keyup', onClickEnter);
//add this event when input lost it focus
$('.k-multiselect .k-input').on('focusout', values);
}
function onClickEnter(e) {
if (e.keyCode === 13) {
var widget = $('#products').getKendoMultiSelect();
var dataSource = widget.dataSource;
var input = $('.k-multiselect .k-input');
var value = input.val().trim();
if (!value || value.length === 0) {
return;
}
var newItem = {
ProductID: currentId++,
ProductName: value
};
dataSource.add(newItem);
var newValue = newItem.ProductID;
widget.value(widget.value().concat([newValue]));
$('.k-multiselect .k-input').val("")
valuess="";//empty values
} else {
//get the values of input and width of input
valuess = $('.k-multiselect .k-input').val()
widths = $('.k-multiselect .k-input').width()
}
}
$("#products").kendoMultiSelect({
autoClose: false,
dataTextField: "ProductName",
dataValueField: "ProductID",
dataSource: {
data: []
},
dataBound: onDataBound
});

function values() {
//set width
$('.k-multiselect .k-input').css("width", widths)
//remove readonly from input
$('.k-multiselect .k-input').removeClass("k-readonly")
$('.k-widget').addClass("k-state-hover k-state-focused")
$('.k-clear-value').removeClass("k-hidden")
$('.k-multiselect .k-input').val(valuess) //add the values
}

#products-list {
display: none !important;
}

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.1021/styles/kendo.mobile.all.min.css">
<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.1021/js/kendo.all.min.js"></script>
</head>
<select id="products" style="width: 100%;"></select>