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.
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"}}
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
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
Related
Using the action helper works fine inside a DOM element:
<input value="123" {{action "someAction" on="click"}}
But then let's say you are using the input helper to generate your input field:
{{input value=123}}
And you want to stick the very same action onto this input helper..
The docs say:
" To dispatch an action on specific events, such as enter or key-press, use the following
{{input value=123 key-press="updateFirstName"}} "
And yet..
This code does nothing:
{{input type="text" value=123 click="someAction"}}
I also tried this:
{{input type="text" value=123 action="someAction" on="click"}}
I'm slowly going insane. Can someone point me to the correct way of using actions inside the Ember input helper?
Thanks!
{{input value=123 key-press="updateFirstName"}}
The above code will work fine. make sure updateFirstName is in the required context like if its in template then it should be present in controller or if its in component then it should be present in component.js file.
For click handler, you can try like the below.
{{input value=appName click=(action "onClick")}}
You can have look at this twiddle.
I am new to ember, thus I would appreciate your assistance. I want to pass an focus-out event (see bold marked text below) from my handlebars template:
{{input type="text" class="form-control" **focus-out= (action "ccFocusLost" event**) }}
To my action in my controller:
ccFocusLost : function(**event**) {
alert(event.relatedTarget.tagName);
},
However, i get an undefined when I do as above. I need a way to obtain the focus-out event in order to find out which element will receive the focus after my main element loses it.
Thanks in advance!
It was tricky, but here is the solution. I have the following code:
template (no need to have an event argument):
{{input type="text" class="form-control" **focus-out= (action "ccFocusLost") }}
Controller:
ccFocusLost : function() {
var targetId= event.relatedTarget.id;
alert(targetId);
},
So it seems that handlebars can access the event, without the need of sending it as an argument. In this case if I press a button with id = button1, the alert will display button1.
You can define the focusOut action handler in your controller and check if the event came from your input field with the class "form-control". E.g.
focusOut(event) {
/* if event did not come from desired input field, return here */
/* else call the action as desired to process the focusOut event */
}
Alternatively, you could create a component that wraps your input field so you could define the focusOut event at the component level instead of the controller. This would remove the need to check if the event came from the input field.
For more information on handling events in Ember, here is the section of the Guides that provides more detail: Handling Events
Two things
If you use focusOut instead of focus-out, the action will automatically include the jQuery event as the argument, no need to specify it in the template.
{{input focusOut=(action "ccFocusLost") }}
In your code, the event is already being passed to your action, it's just that the jQuery event's relatedTarget property is null. This is a jQuery/Javascript event thing, unrelated to Ember. See also here.
There's a lot more information out there on relatedTargets, but it seems it would be better to just use document.activeElement
I'm new to EmberJS/Handlebars and I have a login form that I'd like the user to be able to submit via the enter key. What's the proper way to capture that event and submit my form?
Currently I know 2 ways:
Follow HTML standard.
Use <form> {{input type='submit' action='submitForm'}} </form>.
Remember to use event.preventDefault() in submitForm, or it will redirect to form's action property (or refresh current page if you didn't set any).
Use keydown/keyup event in every form elements that you want to trigger enter (well, this is really a bad idea, but it works):
Template.hbs
{{input type='textbox' key-up='submitForm'}}
Controller.js
export default Ember.Controller.extend({
actions: {
submitForm(value, event) {
if (event.keyCode === 13) {
// Do something here
}
}
}
});
Answering my own question. Here's what I did:
I found a handlebars attribute insert-newline='[functionCall]' that filters the enter key.
I want to perform some action when the user has lost focus from the input fields.
The focus-out property works well for the input fields but has no effect on the select input.
{{view "select" class="form-control"
content=options
optionValuePath="content.id"
optionLabelPath="content.value"
selection= value
focus-out=submitAction}}
How can I get the focus out event for select inputs?
I have used addon ember-autoresize for my textarea to resize my textarea.
{{textarea type="text" placeholder="Comment" value=comment_text autofocus="autofocus" rows=1 max-rows=4 autoresize=true
enter="commentSave"}}
I want to trigger the action when user press enter.But it moves to next line when I press enter.How do I call the action when enter key is pressed in textarea.
Create component called custom-textarea.
in components/custom-textarea.js:
export default Ember.TextArea.extend({
didRender() {
this.$().keypress(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
}
});
}
});
In template, use custom-textarea instead of textarea:
{{custom-textarea type="text" placeholder="Comment" value=comment_text autofocus="autofocus" rows=1 max-rows=4 autoresize=true
enter="commentSave"}}
See WORKING DEMO.
Approach to prevent default behavior taken from this answer.