CODEWITHSUNDEEP
javascriptknockout.jsknockout-2.0
tugberk
tugberk

Reputation: 58444

Knockout.js input focus after click

I am trying to set focus on an input with knockout after the click event is fired but couldn't find a clean way to handle it without coupling with the DOM. Here is the JS code I have:

(function() {

    var vm = {
        text: ko.observable(),
        items: ko.observableArray([])
    }

    vm.addItem = function() { 
        vm.items.push(vm.text());
        vm.text(null);
    }

    ko.applyBindings(vm);

}());

This is my DOM:

<input type="text" data-bind="value: text" />
<a href="#" data-bind="click: addItem">Send</a>

<ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
</ul>

Here is the JsFiddle sample: http://jsfiddle.net/srJUa/1/

What I want it to set focus on the input after the vm.addItem is completed. Any idea how this can be done cleanly, for example with a custom knockout binding?

Upvotes: 8

Views: 11784

Answers (2)

tugberk
tugberk

Reputation: 58444

OK, I have solved the issue by leveraging the hasfocus binding:

(function() {

    var vm = {
        text: ko.observable(),
        items: ko.observableArray([]),
        isFocused: ko.observable()
    }

    vm.addItem = function() { 
        vm.items.push(vm.text());
        vm.text(null);
        vm.isFocused(true);
    }

    ko.applyBindings(vm);

}());

HTML:

<input type="text" data-bind="value: text, hasfocus: isFocused" />
<a href="#" data-bind="click: addItem">Send</a>

<ul data-bind="foreach: items">
    <li data-bind="text: $data"></li>
</ul>

Working sample: http://jsfiddle.net/srJUa/2/

Not sure if this is the best way, though.

Upvotes: 4

nemesv
nemesv

Reputation: 139758

Knockout has a built-in binding for manipulating the focus: The "hasfocus" binding.

So you just need to create a boolean property on your viewmodel and bind it on your input and set the property to true if you want to focus the input.

Or in your case you can binding directly to your text property, so when it is does not have any text it should has the focus:

<input type="text" data-bind="value: text, hasfocus: !text()" />

Demo JSFiddle.

Upvotes: 14

Related Questions