[Kimchi-devel] [PATCH] Put focus on form's first field

[Hongliang Wang]

You can use $.select(); for fields in updating forms like changing names.
On 05/23/2014 03:43 AM, Crístian Viana wrote:
> A good usability practice is to leave the focus on the first editable
> field on a form. That way, the user can start typing immediately what
> they want without having to use the mouse to click on the
> input element.
>
> Explicitely request focus to every form's first field. Some input
> elements did not have an ID; in those cases, the IDs were also added
> to the HTML code.
>
> Signed-off-by: Crístian Viana <vianac at linux.vnet.ibm.com>
> ---
>   ui/js/src/kimchi.guest_add_main.js       | 1 +
>   ui/js/src/kimchi.guest_edit_main.js      | 1 +
>   ui/js/src/kimchi.report_add_main.js      | 1 +
>   ui/js/src/kimchi.repository_add_main.js  | 1 +
>   ui/js/src/kimchi.repository_edit_main.js | 1 +
>   ui/js/src/kimchi.storagepool_add_main.js | 1 +
>   ui/js/src/kimchi.template_edit_main.js   | 2 ++
>   ui/pages/guest-add.html.tmpl             | 2 +-
>   ui/pages/repository-add.html.tmpl        | 2 +-
>   9 files changed, 10 insertions(+), 2 deletions(-)
>
> diff --git a/ui/js/src/kimchi.guest_add_main.js b/ui/js/src/kimchi.guest_add_main.js
> index 2113099..0a4f5e6 100644
> --- a/ui/js/src/kimchi.guest_add_main.js
> +++ b/ui/js/src/kimchi.guest_add_main.js
> @@ -77,6 +77,7 @@ kimchi.guest_add_main = function() {
>   
>       $('#form-vm-add').on('submit', addGuest);
>       $('#vm-doAdd').on('click', addGuest);
> +    $('#guest-add-id-textbox').focus();
>   
>       showTemplates();
>   };
> diff --git a/ui/js/src/kimchi.guest_edit_main.js b/ui/js/src/kimchi.guest_edit_main.js
> index 0236e2d..3588dcc 100644
> --- a/ui/js/src/kimchi.guest_edit_main.js
> +++ b/ui/js/src/kimchi.guest_edit_main.js
> @@ -225,4 +225,5 @@ kimchi.guest_edit_main = function() {
>   
>       $(guestEditForm).on('submit', submitForm);
>       $(saveButton).on('click', submitForm);
> +    $('#guest-edit-id-textbox').focus();
>   };
> diff --git a/ui/js/src/kimchi.report_add_main.js b/ui/js/src/kimchi.report_add_main.js
> index 8759c2b..f7f1b4b 100644
> --- a/ui/js/src/kimchi.report_add_main.js
> +++ b/ui/js/src/kimchi.report_add_main.js
> @@ -43,4 +43,5 @@ kimchi.report_add_main = function() {
>   
>       addReportForm.on('submit', submitForm);
>       submitButton.on('click', submitForm);
> +    nameTextbox.focus();
>   };
> diff --git a/ui/js/src/kimchi.repository_add_main.js b/ui/js/src/kimchi.repository_add_main.js
> index 5dc84e5..4ee7a62 100644
> --- a/ui/js/src/kimchi.repository_add_main.js
> +++ b/ui/js/src/kimchi.repository_add_main.js
> @@ -97,4 +97,5 @@ kimchi.repository_add_main = function() {
>       };
>   
>       $(addForm).on('submit', addRepository);
> +    $('#repo_id').focus();
>   };
> diff --git a/ui/js/src/kimchi.repository_edit_main.js b/ui/js/src/kimchi.repository_edit_main.js
> index 26d6c66..0b562ee 100644
> --- a/ui/js/src/kimchi.repository_edit_main.js
> +++ b/ui/js/src/kimchi.repository_edit_main.js
> @@ -72,4 +72,5 @@ kimchi.repository_edit_main = function() {
>   
>       $(editForm).on('submit', editRepository);
>       $(saveButton).on('click', editRepository);
> +    $('#repository-edit-name-textbox').focus();
>   };
> diff --git a/ui/js/src/kimchi.storagepool_add_main.js b/ui/js/src/kimchi.storagepool_add_main.js
> index 86dbe7f..d37a37d 100644
> --- a/ui/js/src/kimchi.storagepool_add_main.js
> +++ b/ui/js/src/kimchi.storagepool_add_main.js
> @@ -20,6 +20,7 @@ kimchi.storagepool_add_main = function() {
>       kimchi.initStorageAddPage();
>       $('#form-pool-add').on('submit', kimchi.addPool);
>       $('#pool-doAdd').on('click', kimchi.addPool);
> +    $('#poolId').focus();
>   };
>   
>   kimchi.initStorageAddPage = function() {
> diff --git a/ui/js/src/kimchi.template_edit_main.js b/ui/js/src/kimchi.template_edit_main.js
> index f0f4718..a0e9e28 100644
> --- a/ui/js/src/kimchi.template_edit_main.js
> +++ b/ui/js/src/kimchi.template_edit_main.js
> @@ -177,4 +177,6 @@ kimchi.template_edit_main = function() {
>               kimchi.message.error(err.responseJSON.reason);
>           });
>       });
> +
> +    $('#template-edit-id-textbox').focus();
>   };
> diff --git a/ui/pages/guest-add.html.tmpl b/ui/pages/guest-add.html.tmpl
> index 84a1994..e478b2e 100644
> --- a/ui/pages/guest-add.html.tmpl
> +++ b/ui/pages/guest-add.html.tmpl
> @@ -37,7 +37,7 @@
>                   <p class="text-help">
>                       $_("The name used to identify the virtual machine. If omitted, a name will be chosen based on the template used.")
>                   </p>
> -                <input type="text" class="text" style="width: 300px" name="name">
> +                <input type="text" class="text" style="width: 300px" name="name" id="guest-add-id-textbox">
>               </div>
>           </section>
>           <section class="form-section">
> diff --git a/ui/pages/repository-add.html.tmpl b/ui/pages/repository-add.html.tmpl
> index 05b4de9..9a8a037 100644
> --- a/ui/pages/repository-add.html.tmpl
> +++ b/ui/pages/repository-add.html.tmpl
> @@ -39,7 +39,7 @@
>                               $_("Single word, unique identifier for the repository.")
>                           </p>
>                           <div class="textbox-wrapper">
> -                            <input type="text" class="text" name="repo_id" />
> +                            <input type="text" class="text" name="repo_id" id="repo_id" />
>                           </div>
>                       </div>
>                   </div>