forms - 値が空の場合にのみテキストボックスにフォーカスする

Question

現在、ログインフォームにhtml5オートフォーカスを使用しています。ユーザー名のテキストボックスが空の場合にのみオートフォーカスし、空でない場合は次のテキストボックスにオートフォーカスする関数を探しています。

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

あなたの場合にうまくいかない理由は、「名前」という属性がないためです。その理由を理解するには、おそらくjQuery セレクターについて少し読む必要があると思います。ID を使用する場合は、次のようにします。

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

もちろん、パスワードのセレクターを一致させる必要があるため、実際にパスワード入力を選択してフォーカスを設定します。

Answer 2

ページで入力フィールドを検索し、最初の空のフィールドにフォーカスを強制します。フィールドを特定のフォームに制限し、場合によってはテキストエリアも追加したい場合があります-それはあなたに任せます-それほど難しいことではありません.

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

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