DoneJS StealJS jQuery++ FuncUnit DocumentJS
3.14.1
5.0.0 4.3.0 2.3.35
  • About
  • Guides
  • API Docs
  • Community
  • Contributing
  • Bitovi
    • Bitovi.com
    • Blog
    • Design
    • Development
    • Training
    • Open Source
    • About
    • Contact Us
  • About
  • Guides
  • API Docs
    • Observables
      • can-compute
      • can-define
      • can-define/list/list
      • can-define/map/map
      • can-define-stream
      • can-define-stream-kefir
      • can-event
      • can-event/async/async
      • can-event/batch/batch
      • can-event/lifecycle/lifecycle
      • can-kefir
      • can-list
      • can-map
      • can-map-backup
      • can-map-define
      • can-observation
      • can-observe
      • can-simple-map
      • can-simple-observable
      • can-stream
      • can-stream-kefir
    • Data Modeling
      • can-connect
      • can-connect-cloneable
      • can-connect-feathers
      • can-connect-ndjson
      • can-connect-signalr
      • can-fixture
      • can-fixture-socket
      • can-ndjson-stream
      • can-set
    • Views
      • can-component
      • can-ejs
      • can-element
      • can-react-component
      • can-stache
      • can-stache/helpers/route
      • can-stache-bindings
      • can-stache-converters
      • can-view-autorender
      • can-view-callbacks
      • can-view-href
      • can-view-import
      • can-view-live
      • can-view-model
      • can-view-nodelist
      • can-view-parser
      • can-view-scope
      • can-view-target
      • react-view-model
      • react-view-model/component
      • steal-stache
    • Routing
      • can-deparam
      • can-param
      • can-route
      • can-route-pushstate
    • JS Utilities
      • can-assign
      • can-define-lazy-value
      • can-globals
      • can-key-tree
      • can-make-map
      • can-parse-uri
      • can-string
      • can-string-to-any
      • can-util
        • can-util/js
          • ./assign-non-enumerable/
          • ./deep-assign/
          • ./defaults/
          • ./diff/
          • ./diff-array/
          • ./diff-object/
          • ./each/
          • ./get/
          • ./import/
          • ./is-array-like/
          • ./is-empty-object/
          • ./is-function
          • ./is-node/
          • ./is-plain-object/
          • ./is-promise/
          • ./is-promise-like/
          • ./is-web-worker/
          • ./join-uris/
          • ./make-array/
          • ./make-map/
          • ./make-promise/
          • ./omit/
          • ./set-immediate/
          • ./string/
          • ./string-to-any/
        • can-util/dom
          • ./attr/
            • special
              • focused
              • values
          • ./child-nodes/
          • ./class-name/
          • ./data/
          • ./dispatch/
          • ./events/
          • ./frag/
          • ./mutate/
        • deprecated
          • ./dom/ajax/
          • ./dom/events/enter/
          • ./js/assign/
          • ./js/cid/
          • ./js/cid-map/
          • ./js/cid-set/
          • ./js/deparam/
          • ./js/dev/
          • ./js/document/
          • ./js/global/
          • ./js/is-browser-window/
          • ./js/is-string/
          • ./js/location/
          • ./js/log/
          • ./js/mutation-observer/
          • ./js/param/
          • ./js/parse-uri/
          • ./js/types/
      • can-zone
      • can-zone-storage
    • DOM Utilities
      • can-ajax
      • can-attribute-encoder
      • can-control
      • can-dom-events
      • can-event-dom-enter
      • can-event-dom-radiochange
      • can-jquery
    • Data Validation
      • can-define-validate-validatejs
      • can-validate
      • can-validate-interface
      • can-validate-legacy
      • can-validate-validatejs
    • Typed Data
      • can-cid
      • can-construct
      • can-construct-super
      • can-namespace
      • can-reflect
      • can-reflect-promise
      • can-types
    • Polyfills
      • can-symbol
      • can-vdom
    • Core
    • Infrastructure
      • can-global
      • can-test-helpers
    • Ecosystem
    • Legacy
  • Community
  • Contributing
  • GitHub
  • Twitter
  • Chat
  • Forum
  • News
Bitovi

focused

  • Edit on GitHub

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.

CanJS is part of DoneJS. Created and maintained by the core DoneJS team and Bitovi. Currently 3.14.1.

On this page

Get help

  • Chat with us
  • File an issue
  • Ask questions
  • Read latest news