I have seen similar questions on SO, including this one, which is old. I read and followed links, but it is unclear whether there is a proper solution to this issue today.
My bottom issue is that I am using HTML's placeholder="..."
on the input fields. By focusing automatically on the first field, its placeholder is not visible to the user anymore.
EDIT
Here is my HTML code:
<div id='LOGIN_FORM' title="Login">
<form action="">
<input type="text" name="login_id" required="required"
placeholder="Enter user ID" /><br />
<input type="password" name="login_pwd" required="required"
placeholder="Enter password" /><br />
</form>
</div>
Here is my JS code:
$("#login").click(function() {
$("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
{
text: "Ok",
click: function() { $(this).dialog("close"); }
}
] });
});
What I did was I created an extra input and made it invisible (style="display:none"
) then gave it the property autofocus="true"
put this at the end of your dialog content so it wont mess with anything. it should look like this:
<div><!--dialog div-->
<button></button>
<button></button>
<input type="hidden" autofocus="true" />
</div>