Fix pressing enter key on user settings

Specified type='button' for the buttons in the form so they don't get
pseudo clicked on enter key in inputs.  Added a keyup handler to check
for enter keys in the inputs and do the proper action based on where you
are in the form.
This commit is contained in:
Jacob Gable 2013-10-01 10:05:12 -05:00
parent 73d37fc445
commit ed5bd3b808
2 changed files with 31 additions and 5 deletions

View File

@ -19,7 +19,7 @@
<figure class="user-image">
<a id="user-image" class="img" {{#if image}}style="background-image: url({{image}});"{{/if}} href="#"><span class="hidden">{{name}}'s Picture</span></a>
<button class="edit-user-image js-modal-image">Edit Picture</button>
<button type="button" class="edit-user-image js-modal-image">Edit Picture</button>
</figure>
<div class="form-group">
@ -78,7 +78,7 @@
<input type="password" id="user-new-password-verification" />
</div>
<div class="form-group">
<button class="button-delete button-change-password">Change Password</button>
<button type="button" class="button-delete button-change-password">Change Password</button>
</div>
</fieldset>

View File

@ -234,6 +234,8 @@
// ### User profile
Settings.user = Settings.Pane.extend({
templateName: 'settings/user-profile',
id: 'user',
options: {
@ -244,7 +246,8 @@
'click .button-save': 'saveUser',
'click .button-change-password': 'changePassword',
'click .js-modal-cover': 'showCover',
'click .js-modal-image': 'showImage'
'click .js-modal-image': 'showImage',
'keyup .user-profile': 'handleEnterKeyOnForm'
},
showCover: function (e) {
e.preventDefault();
@ -281,6 +284,31 @@
}));
},
handleEnterKeyOnForm: function (ev) {
// Don't worry about it unless it's an enter key
if (ev.which !== 13) {
return;
}
var $target = $(ev.target);
if ($target.is("textarea")) {
// Allow enter key on user bio text area.
return;
}
if ($target.is('input[type=password]')) {
// Change password if on a password input
return this.changePassword(ev);
}
// Simulate clicking save otherwise
ev.preventDefault();
this.saveUser(ev);
return false;
},
saveUser: function () {
var userName = this.$('#user-name').val(),
@ -369,8 +397,6 @@
}
},
templateName: 'settings/user-profile',
afterRender: function () {
var self = this;
Countable.live(document.getElementById('user-bio'), function (counter) {