Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Serabe/aa089dd604acea709adb487a2f5cd50c to your computer and use it in GitHub Desktop.
Save Serabe/aa089dd604acea709adb487a2f5cd50c to your computer and use it in GitHub Desktop.
New Twiddle
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Controller.extend({
logs: Ember.A([]),
actions: {
logEvent(e) {
const originalEvent = e.originalEvent ? e.originalEvent: e;
const key = originalEvent.key ? originalEvent.key: originalEvent.data;
this.get('logs').unshiftObject(originalEvent.type + ': ' + key);
},
clear() {
this.set('logs', Ember.A([]));
}
}
});
<h1>Keyboard Event Demonstration</h1>
<p>Please open your console and type into each input to see how they behave. Notice that the wrapped Ember input doesn't fire keyUp on Return keypresses.</p>
<br>
<br>
Native input <br>
<input onkeydown={{action "logEvent"}}
onkeypress={{action "logEvent"}}
oninput={{action "logEvent"}}
onkeyup={{action "logEvent"}}
onchange={{action "logEvent"}}>
<br> <br>
Ember input <br>
{{input keyDown=(action "logEvent")
keyPress=(action "logEvent")
input=(action "logEvent")
keyUp=(action "logEvent")
change=(action "logEvent")}}
<br> <br>
Wrapped Native input
{{input-wrapper keyDown=(action "logEvent")
keyPress=(action "logEvent")
input=(action "logEvent")
keyUp=(action "logEvent")
change=(action "logEvent")}}
<br>
Wrapped Ember input
{{ember-input-wrapper keyDown=(action "logEvent")
keyPress=(action "logEvent")
input=(action "logEvent")
keyUp=(action "logEvent")
change=(action "logEvent")}}
<br>
<button {{action "clear"}}>Clear Logs</button><br>
<ul>
{{#each logs as |log|}}
<li>{{log}}</li>
{{/each}}
</ul>
<br>
{
"version": "0.12.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.12.0",
"ember-template-compiler": "2.12.0",
"ember-testing": "2.12.0"
},
"addons": {
"ember-data": "2.12.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment