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:from="isEditing()" />
<button></button>
const 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.