knockout.js - two - <input> evento lostfocus/onblur en knockout

knockout js two way binding

Question

Quiero ejecutar un evento en un observable knockout vinculado a una input . Esta función debe ejecutarse cuando el control pierde el foco, incluso sin escribir nada. Traté de cambiar el enlace del evento, pero no se dispara cuando el usuario se aleja del control sin escribir nada. Intenté el evento mouseout, pero eso solo se dispara cuando el usuario hace clic en otro lugar del formulario, después de perder el foco, no exactamente lo que quiero. Quiero que incluso se dispare tan pronto como el foco se aleje del control, incluso con la pestaña.

A continuación está el código que utilicé para el evento 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'');
    }
}

¿Alguien puede ayudar, por favor?

Answer 1

¿Has probado el event:{blur: ValidateFirstName} este evento se disparará si el usuario hace clic o ''tab out'' de la entrada.

<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}"

Aquí hay un JSFiddle de un ejemplo de trabajo.

Answer 2

Creo que hay algunos enfoques que podrías usar. Una buena opción sería usar el enlace hasfocus de KO: http://knockoutjs.com/documentation/hasfocus-binding.html .

Puedes enlazar con un observable booleano y luego suscribirte a él. En la suscripción, puede elegir reaccionar solo cuando el valor ahora sea falso.

Algo como:

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

Enlace contra eso como:

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

Creo que esta sería una buena opción si desea que se active cada vez que un usuario abandona el campo, sin importar cómo lo dejen y sin importar si realmente se realizó un cambio.

Answer 3

Esto funcionó para mí:

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

Answer 4

Me gusta la respuesta de @ RPNiemeyer. Sin embargo, solo quería señalar que no todo tiene que hacerse a través de Knockout. Es solo una herramienta y, a veces, no es la mejor herramienta para el trabajo. Usted siempre usa enlaces de eventos directos como siempre lo hizo en JS, es decir,

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

Si necesita interactuar realmente con su modelo de vista allí, entonces simplemente puede usar ko.dataFor como se describe en la documentación de Knockout en la delegación de eventos :

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

Answer 5

Solo tuve el mismo problema, lo resolví creando un enlace personalizado:

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

Y luego lo llamó así:

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

Answer 6

Usando TypeScript lo resolví usando 2 enlaces personalizados, un SetFocusBinding y un Enlace OnBlur ... Usando SetFocusBinding me aseguro de que el campo de entrada tenga el foco. Usando el enlace OnBlur se llama a una función cuando se desencadena el evento de desenfoque.

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

y ...

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