web-dev-qa-db-ja.com

<input>ノックアウトのlostfocus / onblurイベント

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');
    }
}

誰でも助けてくれますか？

knockout.jsmouseoutevent-binding
26
devC

使用できるアプローチはいくつかあると思います。素晴らしいオプションは、KOのhasfocusバインディングを使用することです： http://knockoutjs.com/documentation/hasfocus-binding.html 。

ブール値のオブザーバブルに対してバインドし、サブスクライブできます。サブスクリプションでは、値が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"

ユーザーがフィールドを離れるたびに、実際に変更が行われたかどうかに関係なく、ユーザーがフィールドを離れるたびに起動するようにしたい場合、これは良いオプションだと思います。

32
RP Niemeyer

@RPNiemeyerの回答が好きです。ただし、すべてをKnockout経由で行う必要はないことを指摘したかっただけです。それは単なるツールであり、時にはそれは仕事に最適なツールではありません。あなたはいつもJSでやっているように、常に直接イベントバインディングを使用します、つまり.

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

そこで実際にビューモデルとやり取りする必要がある場合は、単にko.dataForイベントの委任に関するノックアウトのドキュメント ：

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

これは私のために働いた：

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

私は同じ問題を抱えていたので、カスタムバインディングを作成して解決しました。

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

そして、次のように呼び出します：

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

やってみました 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 を示します。

4
Gab

TypeScriptを使用して、SetFocusBindingとOnBlur Bindingという2つのカスタムバインディングを使用して解決しました... SetFocusBindingを使用して、入力フィールドにフォーカスがあることを確認します。 OnBlurバインディングを使用すると、blurイベントがトリガーされたときに関数が呼び出されます。

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();
0
Paul0515