如何在弹出HTML表单作为JQuery对话框时避免自动关注第一个输入字段？ [英] How to avoid automatic focus on first input field when popping a HTML form as a JQuery dialog?

问题描述

我看到过类似的问题，包括这是一个旧的。我阅读并遵循链接，但目前还不清楚这个问题今天是否有适当的解决方案。

我的底部问题是我使用HTML的 placeholder =...。通过自动关注第一个字段，其占位符对用户不再可见。

编辑

以下是我的HTML代码：

 < div id ='LOGIN_FORM'title =Login> ; 
< form action => 
< input type =textname =login_idrequired =required
 placeholder =输入用户ID/>< br /> 
< input type =passwordname =login_pwdrequired =required
 placeholder =Enter password/>< br /> 
< / form> 
< / div> 
  

这是我的JS代码：

<$ p点击（函数（）{
$（＃LOGIN_FORM）。dialog（{modal：true}，{buttons：[
{
text：Ok，
click：function（）{$（this）.dialog（close）;}
}
]}）;
}）;

解决方案

解决方案是将 tabindex = - 1在所有输入字段上保持HTML占位符可见。

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"); }
        }
    ] });
});

解决方案

A solution is to set tabindex="-1" on ALL input fields to keep HTML placeholders visible.

这篇关于如何在弹出HTML表单作为JQuery对话框时避免自动关注第一个输入字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！