CODEWITHSUNDEEP
ember.jsaction
David
David

Reputation: 4485

action on enter in ember

Is there anyway for this text input

<input type="text" aria-controls="existing-user-table" placeholder="Search">

to trigger an action on the controller when the user hits enter?

I don't like to enclose it in a form tag or create a button, just that input textfield.

Upvotes: 24

Views: 22583

Answers (3)

FictitiousWizard
FictitiousWizard

Reputation: 683

The input helper has an insert-newline action that will trigger when the user hits the enter key.

{{input type='text' aria-controls='existing-user-table' placeholder='Search' insert-newline='myAction'}}

Text Input Helpers

Insert Newline docs

Upvotes: 29

Vinoth Kumar
Vinoth Kumar

Reputation: 1377

From Ember v1.13.0 the action on input helper is depricated we should use useenter or key-press instead of action

Refer Ember Docs

{{input value=someValue enter='someAction'}}

this will trigger the mentioned action when the user press enter on the text input

Upvotes: 16

Mike Grassotti
Mike Grassotti

Reputation: 19050

Use the {{input}} helper - if you include an action parameter it will trigger that action on the controller when the user hits enter. So:

{{input action="myAction" aria-controls="existing-user-table" placeholder="Search"}}

The input helper api docs do not mention this capability, but the helper just wraps Ember.TextField

Also it is possible to trigger the action on keyPress instead of enter by specifying the onEvent property:

{{input action="myAction" onEvent="keypress" aria-controls="existing-user-table" placeholder="Search"}}

Upvotes: 29

Related Questions