JavaScriptを使用してフィールドをスキップするにはどうすればよいですか?
-
09-06-2019 - |
質問
次のようなフォームがあります。
<form name="mine">
<input type=text name=one>
<input type=text name=two>
<input type=text name=three>
</form>
ユーザーが「one」に値を入力するとき、入力内容によっては、フィールド「two」をスキップしたい場合があります。たとえば、ユーザーが「123」と入力し、Tab キーを使用して次のフィールドに移動した場合、それをスキップしてフィールド 3 に移動したいとします。
使ってみた OnBlur
そして OnEnter
, 、成功せず。
試してください 1:
<form name="mine">
<input type=text name=one onBlur="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=two>
<input type=text name=three>
</form>
試してください 2:
<form name="mine">
<input type=text name=one>
<input type=text name=two onEnter="if (document.mine.one.value='123') document.three.focus();>
<input type=text name=three>
</form>
しかし、これらはどれも機能しません。ブラウザでは、フォーカスが変更されている間はフォーカスを変更することができないようです。
ところで、これらはすべて Linux 上の Firefox で試してみました。
解決
tabindex 属性を要素に付加してから、プログラムで (JavaScript で変更してください) 試してください。
<INPUT tabindex="3" type="submit" name="mySubmit">
他のヒント
を使用できます オンフォーカス フィールド 2 のイベント。フォーカスを受け取ったときに呼び出されます。その時点で、フィールド 1 の値が更新されるはずなので、チェックを実行できます。
説明した方法を使用して機能した場合、ユーザーがフィールドにタブ移動するのではなく、フィールドをクリックしたときにフォーカスも変更されます。これではユーザーがイライラする結果になることは保証します。(正確になぜうまくいかないのかは私にはわかりません。)
代わりに、前に述べたように、フィールド 1 の内容が変更されたらすぐに、適切なフィールドの tabindex を変更します。
<form name="mine">
<input type="text" name="one" onkeypress="if (mine.one.value == '123') mine.three.focus();" />
<input type="text" name="two">
<input type="text" name="three">
</form>
試す onkeypress
の代わりに onblur
. 。また、 onfocus
フィールド 2 の部分は、フィールド 3 に送信する必要がある場所です。1 つが 123 の場合、2 つを入力する必要はないので、2 つでそれを確認するだけだと思います。 onfocus
そして3つに送ります。