CODEWITHSUNDEEP
javascriptember.jshandlebars.jsember-cli
kristjan reinhold
kristjan reinhold

Reputation: 2048

Ember.js How to trigger button action pressing "enter"?

how to trigger an action using enter key. I've previously tabed on the button so its "active". For inputs i could go enter='actionName' which does not work for buttons.

<div class="input-group">
    {{clickable-textfield value=value placeholder=inputPlaceholder}}

    <span class="input-group-btn">
        <button class="btn btn-default" type="button" {{action 'manuallySelect'}}>
            <span class="icon-user"></span>
        </button>
    </span>
</div>

enter image description here

Upvotes: 1

Views: 2267

Answers (2)

NicholasJohn16
NicholasJohn16

Reputation: 2409

For this, you'll more than likely need to create a component.

ember g component enterable-button

Then in the component file, you'll need to listen for a key event and check if they key pressed was the enter key.

// components/enterable-button.js
import Ember from 'ember';

export default Ember.Component.extend({
    tagName: 'button',
    className: 'btn',
    keyPress(event) {
        if (event.keyCode === 13) {
            this.sendAction('enter');
        }
    }
});

Now in your template, you'll call the component like this:

{{#enterable-button class="btn-default" enter='manuallySelect'}}
  <span class="icon-user"></span>
{{/enterable-button}}

This should work, but I wasn't able to create a jsbin right now. It might require a little reworking.

Upvotes: 1

Zoltan
Zoltan

Reputation: 4966

The form should be wrapped in a <form> tag and you can use on='submit' in the action:

  <form {{action 'saveBook' book on='submit'}} class="form-inline">
    <div class="input-group">
      {{input value=book.title class='form-control'}}
      <div class="input-group-btn">
        <button type="submit" class="btn btn-success" disabled={{book.isNotValid}}>Save</button>
        <button class="btn btn-danger" {{action 'cancelBookEdit' book}}>Cancel</button>
      </div>
    </div>
  </form>

Source: https://github.com/zoltan-nz/library-app1 | http://yoember.com

Upvotes: 1

Related Questions