home
  • Blog
1.10
  • Getting Started
  • Getting Ember
  • Concepts
  • The Object Model
  • Application
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Views
  • Enumerables
  • Testing
  • Configuring Ember.js
  • Cookbook
    • Introduction
    • Contributing
    • User Interface and Interaction
      • Introduction
      • Adding CSS Classes to Your Components
      • Adding CSS Classes to Your Components Based on Properties
      • Focusing a Textfield after It's Been Inserted
      • Displaying Formatted Dates With Moment.js
      • Specifying Data-Driven Areas of Templates That Do Not Need To Update
      • Using Modal Dialogs
      • Resetting scroll on route changes
    • Event Handling & Data Binding
    • Helpers & Components
    • Working with Objects
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.10.0.
Go to v5.0.0

Focusing a Textfield after It's Been Inserted

Edit pencil

Problem

You have an Ember.TextField instance that you would like become focused after it's been inserted.

Solution

Subclass Ember.TextField and define a method marked with .on('didInsertElement'). Inside this method apply focus to the text field by accessing the components's jQuery $ property:

App.FocusInputComponent = Ember.TextField.extend({
  becomeFocused: function() {
    this.$().focus();
  }.on('didInsertElement')
});

For the component's template:

Focus Input component!
{{focus-input}}

Discussion

Custom components provide a way to extend native HTML elements with new behavior like autofocusing.

Our App.FocusInputComponent is an extension of the Ember.TextField component with a becomeFocused method added. After it is added to the DOM, every component in Ember.js has access to an underlying jQuery object. This object wraps the component's element and provides a unified, cross-browser interface for DOM manipulations like triggering focus.

Because we can only work with these DOM features once an Ember.js component has been added to the DOM we need to wait for this event to occur. Component's have a didInsertElement event that is triggered when the component has been added to the DOM.

By default Ember.js extends the native Function.prototype object to include a number of additional functions, the on function among them. on gives us a declarative syntax for signify that a method should be called when a specific event has fired. In this case, we want to call our new becomeFocused method when the didInsertElement is fired for an instance of our component.

Prototype extension can be disabled by setting the Ember.EXTEND_PROTOTYPES property to false.

Example

JS Bin

left arrow
Adding CSS Classes to Your Components Based on Properties
Displaying Formatted Dates With Moment.js
right arrow
On this page

  • Problem
  • Solution
  • Discussion
  • Example
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue