diff --git a/ui/css/cloudstack3.css b/ui/css/cloudstack3.css index 1dd8dc9cb3c..cbd09f8c948 100644 --- a/ui/css/cloudstack3.css +++ b/ui/css/cloudstack3.css @@ -242,6 +242,7 @@ body.login { position: absolute; margin-left: 11px; margin-top: 12px; + cursor: text; } .login .fields .field label.error { diff --git a/ui/scripts/ui-custom/login.js b/ui/scripts/ui-custom/login.js index 0eb0a5b9f87..8997fb62afc 100644 --- a/ui/scripts/ui-custom/login.js +++ b/ui/scripts/ui-custom/login.js @@ -26,23 +26,35 @@ $form.validate(); // Form label behavior - $inputs.bind('focus blur', function(event) { + $inputs.bind('keydown keyup focus blur', function(event) { var $target = $(event.target); var $label = $form.find('label').filter(function() { - return $(this).attr('for') == $target.attr('name') && !$(this).hasClass('error'); + return $(this).attr('for') == $target.attr('name'); }); - var isEmpty = !$target.val(); - var isFocus = event.type == 'focus'; - var isBlur = event.type == 'blur'; - if (isFocus) { + if (event.type == 'keydown') { $label.hide(); - } else if (isBlur && isEmpty) { - $label.show(); + + return true; + } else { + if (!$target.val()) { + $label.show(); + } else { + $label.hide(); + } } + + return true; }); - $inputs.focus().blur(); + // Labels cause related input to be focused + $login.find('label').click(function() { + var $input = $inputs.filter('[name=' + $(this).attr('for') + ']'); + + $input.focus(); + }); + + $inputs.filter(':first').focus(); // Login action $login.find('input[type=submit]').click(function() {