focused
Signifies if an element, usually an <input>
is the focused element on the page.
Boolean
domAttr.get(input, "focused"); // -> false
domAttr.set(input, "focused", true);
domAttr.get(input, "focused"); // -> true
One-way binding to set focus
Use focused
in event bindings to have a way to set focus to an input. In this example we are one-way binding to focused
to a function that will recompute:
<input type="text" {$focused}="isEditing()" />
<button></button>
var ViewModel = DefineMap.extend({
editing: {
value: false
},
isEditing: function(){
return this.editing;
}
});
...
In this example whenever the editing
property changes to true
, isEditing
will be reevaluated to true
when will set focus on the input. You can imagine there might be some other use, such as a button, that triggers the editing status to change.
Two-way binding to focused
Another scenario is that you would like to know when an element is focused, perhaps to show a message (such as a tooltip) somewhere else in the DOM. The example below two-way binds to a boolean property on the ViewModel. When focus is set, the property is updated.