淘汰赛中的<input> lostfocus/onblur事件

Question

我想在一个敲除的观察点上执行一个事件input.当控件失去焦点时,即使没有输入任何内容,也应执行此功能.我尝试更改事件绑定但是当用户离开控件而不键入任何内容时它不会触发.我尝试过mouseout事件,但只有当用户在失去焦点后点击表单中的其他地方时才会触发 - 这不是我想要的.即使使用制表符,我也希望一旦焦点从控件移开,偶数就会闪光.

以下是我用于mouseout事件的代码:

<input
    type="text"
    id="txtFirstName"
    tabindex="1"
    maxlength="25"
    class="txtbox" 
    style="width: 200px;"
    data-bind="value: FirstName, 
               attr: {title: FirstNameErrorMessage },
               css: {validationFailed: !IsValidFirstName() },
               event: {mouseout: ValidateFirstName}" 
/>

this.ValidateFirstName = function () {
    self.IsValidFirstName(true);
    self.FirstNameErrorMessage('');
    if (self.FirstName() == '') {
        self.IsValidFirstName(false);
        self.FirstNameErrorMessage('First Name is required');
    }
}

有人可以帮忙吗？

Answer 1

我认为您可以使用一些方法.一个很好的选择是使用KO的hasfocus绑定:http://knockoutjs.com/documentation/hasfocus-binding.html.

您可以绑定布尔值observable,然后订阅它.在订阅中,您可以选择仅在值现在为false时作出反应.

就像是:

self.FirstName = ko.observable();
self.FirstName.focused = ko.observable();

self.FirstName.focused.subscribe(function(newValue) {
   if (!newValue) {
       //do validation logic here and set any validation observables as necessary
   }
});

绑定它像:

data-bind="value: FirstName, hasfocus: FirstName.focused"

我认为如果你希望每次用户离开现场,无论他们如何离开现场,无论是否实际进行了更改,这都是一个不错的选择.

Answer 2

我喜欢@ RPNiemeyer的回答.但是,我只是想指出,并非所有事情都必须通过Knockout完成.它只是一种工具,有时它不是工作的最佳工具.你总是只使用直接事件绑定,就像你在JS中一直做的那样,即

$('#FirstName').on('blur', function () {
    // do something
});

如果您需要在那里实际与视图模型进行交互,那么您可以ko.dataFor按照Knockout关于事件委派的文档中的描述使用:

$('#FirstName').on('blur', function () {
    var data = ko.dataFor(this);
    // do something with data, i.e. data.FirstName()
});

Answer 3

这对我有用:

data-bind="event: { blur: OnBlurEvent }"

Answer 4

我刚遇到同样的问题,通过创建自定义绑定解决了这个问题:

ko.bindingHandlers.modifyOnFocusOut = {
    init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) {
        $(element).blur(function() {
            //Do your work
        });
    }
}

然后这样叫:

 data-bind="value: FirstName, modifyOnFocusOut: FirstName"

Answer 5

您是否尝试过，event:{blur: ValidateFirstName}如果用户单击输入或“跳出”输入，则会触发此事件。

<input
    type="text"
    id="txtFirstName"
    tabindex="1"
    maxlength="25"
    class="txtbox" 
    style="width: 200px;"
    data-bind="value: FirstName, 
               attr: {title: FirstNameErrorMessage},
               css: {validationFailed: !IsValidFirstName()},
               event: {blur: ValidateFirstName}"

这是JSFiddle的一个工作示例。