仅当值为空时才聚焦文本框答案

【问题标题】：focus textbox only if value is empty仅当值为空时才聚焦文本框
【发布时间】：2012-11-07 03:18:42
【问题描述】：

我目前正在将 html5 自动对焦用于登录表单。我正在寻找一个函数，它只会在用户名文本框为空时自动聚焦，如果不为空则自动聚焦下一个文本框。

【问题讨论】：

【解决方案1】：

下面是 HTML

<input name="username" value="a" autofocus="autofocus">
<input name="password" type="password">

你可以用 jQuery 做这样的事情

var $username = $('[name="username"]');
var $password = $('[name="password"]');
if($username.val().trim().length > 0){
    $password.focus();
}

应该就是这么简单。确保 Javascript 位于页面底部，或者您可以使用 $(document).ready() 函数确保在呈现 HTML 后运行 Javascript。

更多细节基于附加信息

<asp:TextBox ID="UserName" runat="server" autofocus="true" required="true"></asp:TextBox>

它不适用于您的情况的原因是因为您没有名为“name”的属性。我认为您可能应该阅读一些关于jQuery selector 的内容以了解原因。如果你使用 ID，那么你会这样做。

var $username = $('#UserName');
var $password = $('#password');
if($username.val().trim().length > 0){
    $password.focus();
}

当然，您现在必须匹配密码选择器，这样它才会真正选择密码输入来设置焦点。

【讨论】：

您的示例适用于输入框，但是当尝试将其与 asp 文本框一起使用时，它不会。知道为什么吗？
HTML 是什么样的？举一些例子，我可以给你匹配的答案。

【解决方案2】：

在页面中搜索输入字段，并强制将焦点放在第一个空字段上。我们可能希望将字段限制为给定的表单，并且可能还添加 textareas - 不过我会把它留给你 - 没什么太难的。

var inputs = document.getElementsByTagName('input'),
    i = -1, I = inputs.length,
    curr;

for (; ++i < I;) {
    curr = inputs[i];
    if ( !curr.value.length ) {
        curr.focus();
        break;
    }
}

【讨论】：