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

Question

我正在使用 JQuery 的 Kendo UI，并且我声明了一个多选来充当 this example 之后的 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，您可以在其中添加一个else 部分以获取用户输入的最后一个值并将它们存储在某个全局变量中。然后，您可以使用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>