34

我在 SO 上看到过类似的问题，包括这个很旧的问题。我阅读并关注了链接，但目前尚不清楚今天是否有适当的解决方案来解决这个问题。

我的根本问题是我placeholder="..."在输入字段上使用 HTML。通过自动关注第一个字段，其占位符不再对用户可见。

编辑

这是我的 HTML 代码：

<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>

这是我的 JS 代码：

$("#login").click(function() { 
    $("#LOGIN_FORM").dialog({ modal: true }, { buttons: [
    {
            text: "Ok",
            click: function() { $(this).dialog("close"); }
        }
    ] });
});
4

8 回答 8

24

我所做的是我创建了一个额外的输入并使其不可见（style="display:none"）然后给它一个属性，autofocus="true"把它放在你的对话内容的末尾，这样它就不会弄乱任何东西。它应该是这样的：

        <div><!--dialog div-->
           <button></button>
           <button></button> 
          <input type="hidden" autofocus="true" />
        </div>
于 2013-12-22T23:09:39.123 回答
11

将此标签添加为页面上的第一个输入字段对我有用。

<input type="text" autofocus="autofocus" style="display:none" />

如果您想使用 tab 键在字段中移动，则不需要 javascript 并保持 tab 顺序。

（在 Chrome > 65、Firefox > 59 和 Edge 上测试）

于 2018-03-18T23:48:14.973 回答
9

一种解决方案是设置所有tabindex="-1"输入字段以保持 HTML 占位符可见。

于 2011-10-19T19:53:42.610 回答
8

我最终这样做了：

<input type="text" style="position: fixed; left: -10000000px;" disabled/>
于 2015-02-12T14:25:21.113 回答
4

在我的情况下，使用 display: none 或 type=hidden 的解决方案没有帮助。您可以使用

<div style="max-width: 0; max-height: 0; overflow: hidden;">
    <input autofocus="true" />
</div>

作为第一个输入。

于 2020-01-06T13:40:49.827 回答
1

您可以使用 jquery：

jQuery(document).ready(function(e) {
   $('input[name="login_id"]').blur(); 
});

如果您发现很难跟踪为什么将自动对焦设置到表单的第一个输入字段中的错误。</body>确保在文档的结束正文标记之前插入此代码。

于 2016-10-09T14:40:23.053 回答
0

这对我有用。

<input type="text" name="fake[email]" style="height:1px;width:1px;overflow:hidden;clip:rect(1px, 1px, 1px, 1px);border:0;outline:none;padding:0;margin:0;color:transparent;" tab-index="-1" aria-hidden="true" value=".">
于 2020-08-27T10:07:11.333 回答
-4

如果没有 JQuery 和 JavaScript，我们可以提供一个纯 CSS 的解决方案。

  1. 删除所有焦点的轮廓

    :focus {
    outline: 0;
}

  2. 添加新焦点的轮廓

    :link:focus, :visited:focus {
    outline: none;
}
于 2017-11-02T21:31:55.387 回答