Knockout.js input focus after click

11,227

Solution 1

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.

Solution 2

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.

11,227

Author by

tugberk

Senior Software Engineer and Tech Lead, with a growth mindset belief and 10+ years of practical software engineering experience including technical leadership and distributed systems. I have a passion to create impactful software products, and I care about usability, reliability, observability and scalability of the software systems that I work on, as much as caring about day-to-day effectiveness, productivity and happiness of the team that I work with. I occasionally speak at international conferences (tugberkugurlu.com/speaking), and write technical posts on my blog (tugberkugurlu.com). I currently work at Facebook as a Software Engineer. I used to work at Deliveroo as a Staff Software Engineer in the Consumer division, working on distributed backend systems which have high throughput, low latency and high availability needs. Before that, I used to work at Redgate as a Technical Lead for 4 years, where I led and line-managed a team of 5 Software Engineers. I was responsible for all aspects of the products delivered by the team from technical architecture to product direction. I was also a Microsoft MVP for 7 years between 2012-2019 on Microsoft development technologies.

Updated on June 27, 2022

Comments

tugberk about 2 years
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?
tugberk about 11 years

thanks!:) it has just came to my mind and I solved it the same way: jsfiddle.net/srJUa/2