26

我想在绑定到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');
    }
}

有人可以帮忙吗？

4

6 回答 6

34

我认为您可以使用几种方法。一个不错的选择是使用 KO 的hasfocus绑定： http: //knockoutjs.com/documentation/hasfocus-binding.html。

你可以绑定一个 boolean 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"

我认为，如果您希望每次用户离开该字段时都触发它，无论他们如何离开，也无论是否实际进行了更改，这将是一个不错的选择。

于 2013-04-19T11:44:25.013 回答
23

这对我有用：

data-bind="event: { blur: OnBlurEvent }"
于 2014-08-20T10:08:59.020 回答
22

我喜欢@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()
});
于 2013-04-19T14:48:51.957 回答
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。

于 2014-10-25T14:12:05.860 回答
5

我刚刚遇到了同样的问题，通过创建自定义绑定解决了它：

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

然后这样称呼它：

 data-bind="value: FirstName, modifyOnFocusOut: FirstName"
于 2013-07-14T05:14:58.327 回答
0

使用 TypeScript，我使用 2 个自定义绑定、一个 SetFocusBinding 和一个 OnBlur 绑定解决了它……使用 SetFocusBinding 我确保输入字段具有焦点。使用 OnBlur 绑定会在触发模糊事件时调用函数。

module Fx.Ko.Bindings {
    export class SetFocusBinding implements KnockoutBindingHandler {
        public update(element, valueAccessor, allBindingsAccessor) {
            var value = valueAccessor();
            var valueUnwrapped = ko.unwrap(value);
            if (valueUnwrapped == undefined) {
                return;
            }
            if (valueUnwrapped)
                $(element).focus();
        }
    }
}

和 ...

    module Fx.Ko.Bindings {
        export class OnBlurBinding implements KnockoutBindingHandler {
            public init(element, valueAccessor, allBindings, viewModel, bindingContext) {
                var value = valueAccessor();
                $(element).on('blur', function (event) {
                    value();
                });
            }
        }
    }
interface KnockoutBindingHandlers {
    onBlur: KnockoutBindingHandler;
}
ko.bindingHandlers.onBlur = new Fx.Ko.Bindings.OnBlurBinding();
于 2015-06-16T09:44:34.537 回答