sven/ulogger-server
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Set focus to element with autofocus attribute

Browse Source
This commit is contained in:
Bartek Fabiszewski 2020-05-22 23:17:02 +02:00
parent 7169abc60f
commit ee5c70ee5a
4 changed files with 16 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
js/src/dialog.js
View File

@ -64,6 +64,17 @@ export default class uDialog {
if (!this.visible) { if (!this.visible) {
document.body.append(this.element); document.body.append(this.element);
this.visible = true; this.visible = true;
this.autofocus();
}
}
/**
* Set focus to element with autofocus attribute
*/
autofocus() {
const focusEl = this.element.querySelector('[autofocus]');
if (focusEl) {
focusEl.focus();
} }
} }

2
js/src/positiondialogmodel.js
View File

@ -64,7 +64,7 @@ export default class PositionDialogModel extends ViewModel {
<div style="clear: both; padding-bottom: 1em;"></div> <div style="clear: both; padding-bottom: 1em;"></div>
<form id="positionForm"> <form id="positionForm">
<label><b>${$._('comment')}</b></label><br> <label><b>${$._('comment')}</b></label><br>
<textarea style="width:100%;" maxlength="255" rows="5" placeholder="${$._('comment')}" name="comment" data-bind="comment">${this.position.hasComment() ? uUtils.htmlEncode(this.position.comment) : ''}</textarea> <textarea style="width:100%;" maxlength="255" rows="5" placeholder="${$._('comment')}" name="comment" data-bind="comment" autofocus>${this.position.hasComment() ? uUtils.htmlEncode(this.position.comment) : ''}</textarea>
<div class="buttons"> <div class="buttons">
<button class="button-reject" data-bind="onCancel" type="button">${$._('cancel')}</button> <button class="button-reject" data-bind="onCancel" type="button">${$._('cancel')}</button>
<button class="button-resolve" data-bind="onPositionUpdate" type="submit">${$._('submit')}</button> <button class="button-resolve" data-bind="onPositionUpdate" type="submit">${$._('submit')}</button>

2
js/src/trackdialogmodel.js
View File

@ -58,7 +58,7 @@ export default class TrackDialogModel extends ViewModel {
<div style="clear: both; padding-bottom: 1em;"></div> <div style="clear: both; padding-bottom: 1em;"></div>
<form id="trackForm"> <form id="trackForm">
<label><b>${$._('trackname')}</b></label> <label><b>${$._('trackname')}</b></label>
<input type="text" placeholder="${$._('trackname')}" name="trackname" data-bind="trackname" value="${uUtils.htmlEncode(this.track.name)}" required> <input type="text" placeholder="${$._('trackname')}" name="trackname" data-bind="trackname" value="${uUtils.htmlEncode(this.track.name)}" required autofocus>
<div class="buttons"> <div class="buttons">
<button class="button-reject" data-bind="onCancel" type="button">${$._('cancel')}</button> <button class="button-reject" data-bind="onCancel" type="button">${$._('cancel')}</button>
<button class="button-resolve" data-bind="onTrackUpdate" type="submit">${$._('submit')}</button> <button class="button-resolve" data-bind="onTrackUpdate" type="submit">${$._('submit')}</button>

6
js/src/userdialogmodel.js
View File

@ -157,7 +157,7 @@ export default class UserDialogModel extends ViewModel {
case 'add': case 'add':
observer = 'onUserAdd'; observer = 'onUserAdd';
header = `<label><b>${$._('username')}</b></label> header = `<label><b>${$._('username')}</b></label>
<input type="text" placeholder="${$._('usernameenter')}" name="login" data-bind="login" required>`; <input type="text" placeholder="${$._('usernameenter')}" name="login" data-bind="login" required autofocus>`;
fields = `<label><b>${$._('password')}</b></label> fields = `<label><b>${$._('password')}</b></label>
<input type="password" placeholder="${$._('passwordenter')}" name="password" data-bind="password" required> <input type="password" placeholder="${$._('passwordenter')}" name="password" data-bind="password" required>
<label><b>${$._('passwordrepeat')}</b></label> <label><b>${$._('passwordrepeat')}</b></label>
@ -174,7 +174,7 @@ export default class UserDialogModel extends ViewModel {
<input type="checkbox" name="changepass" data-bind="passVisibility"><br> <input type="checkbox" name="changepass" data-bind="passVisibility"><br>
<div style="display: none;" data-bind="passInput"> <div style="display: none;" data-bind="passInput">
<label><b>${$._('password')}</b></label> <label><b>${$._('password')}</b></label>
<input type="password" placeholder="${$._('passwordenter')}" name="password" data-bind="password" required> <input type="password" placeholder="${$._('passwordenter')}" name="password" data-bind="password" required autofocus>
<label><b>${$._('passwordrepeat')}</b></label> <label><b>${$._('passwordrepeat')}</b></label>
<input type="password" placeholder="${$._('passwordenter')}" name="password2" data-bind="password2" required> <input type="password" placeholder="${$._('passwordenter')}" name="password2" data-bind="password2" required>
</div> </div>
@ -184,7 +184,7 @@ export default class UserDialogModel extends ViewModel {
case 'pass': case 'pass':
observer = 'onPassChange'; observer = 'onPassChange';
fields = `<label><b>${$._('oldpassword')}</b></label> fields = `<label><b>${$._('oldpassword')}</b></label>
<input type="password" placeholder="${$._('passwordenter')}" name="old-password" data-bind="oldPassword" required> <input type="password" placeholder="${$._('passwordenter')}" name="old-password" data-bind="oldPassword" required autofocus>
<label><b>${$._('newpassword')}</b></label> <label><b>${$._('newpassword')}</b></label>
<input type="password" placeholder="${$._('passwordenter')}" name="password" data-bind="password" required> <input type="password" placeholder="${$._('passwordenter')}" name="password" data-bind="password" required>
<label><b>${$._('newpasswordrepeat')}</b></label> <label><b>${$._('newpasswordrepeat')}</b></label>