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

Question

我正在使用 JQuery 的 Kendo UI，并在此示例之后声明了一个多选作为 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');
});

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

如何阻止多选清除其输入？

标签： jquerykendo-uikendo-multiselect

Answer 1

正如您已经定义function的那样，keyup您可以在其中添加一个 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>