Binding to click-in and click-out events in textarea

Question

I am implementing a knockoutJS-base client side comments system. I need to change the textarea style the moment the user has clicked on it to enable editing, and to style the textarea back to the defaults when a user has clicked somewhere else of the page (click-out) making the textarea inactive.

How do I bind to these events with knockoutJS?

score 2 · Answer 1 · answered Sep 30 '12 at 23:12

2

You can use the event binding to capture any events, and the css binding to style elements.

Here's a simple example using the focur/blur events: http://jsfiddle.net/antishok/KXhem/48/

answered Sep 30 '12 at 23:12

antishok

2,910
16
21

1

Heh seems me and photo_tom answered in the same instant. I forgot about `hasfocus`. +1 to photo_tom. I'll leave my answer up just cause it shows another KO way to do it – antishok Sep 30 '12 at 23:16
Thanks for upvote. Your answer is a great example of how to use the event binding. – photo_tom Sep 30 '12 at 23:25

score 2 · Accepted Answer · edited May 23 '17 at 12:04

I've put together a fiddle showing two different ways. It is at http://jsfiddle.net/photo_tom/ckb9V/1/.

The first textarea shows how to add a class using knockout's hasfocus and CSS bindings. I believe this example shows how to do what you requested in your question. You can see a full description on how this works at http://knockoutjs.com/documentation/hasfocus-binding.html

The second textarea shows how to do it with CSS only. You can see a full description with this at "CSS/HTML: Create a glowing border around an Input Field"

Binding to click-in and click-out events in textarea

2 Answers2