使用jQuery在textarea中按Enter

Question

In an acceptance test, pressing Enter key after text input triggers an event. I tried to fillIn text and hit enter with the keyEvent.

PS: Testem ignores the keyEvent.

HTML:

<div class="issue-container">
<div class="create-container">
<div class="input-field ui-textarea md-animated ember-view">
<label id="ember1369-label" for="ember1369-input" class="active">Add an issue</label>
<textarea data-test-id="txtid" id="ember1369-input" class="md-textarea" style="height: 21.5px; overflow: hidden;"></textarea></div></div></div>

Acceptance test:

test('review-an-element', async function(assert) {
await fillIn(testSelector('txtid'), 'Input is typed here and then hit enter');
await keyEvent(testSelector('txtid'), 'keypress', 13);}); //hitting enter

My jQuery attempt:

var e = jQuery.Event("keyup");
e.which = 13;
e.keyCode = 13;    
await $('.md-textarea').trigger(e);

Answer 1

You need to handle the keyup event, not the keypress event. The keypress event fires only for keys that produce output, like letter keys. Reference: https://developer.mozilla.org/en-US/docs/Web/Events/keypress

For your acceptance test:

change

await keyEvent(testSelector('txtid'), 'keypress', 13);

to

await keyEvent(testSelector('txtid'), 'keyup', 13);

Edit: The testSelector() helper is deprecated - https://github.com/simplabs/ember-test-selectors/pull/134

Answer 2

My solution with jQuery.

var e = $.Event('keydown', { keyCode: 13 });

test('txtarea', async function(assert){
await fillIn($('.md-textarea')[0], 'text is entered here');
await $('.md-textarea').trigger(e);
});