7

フォーム内に入力された値のいくつかの条件に応じてフィールドが表示される、より複雑なフォームに取り組んでいます。

ただし、フォームが<Tab>キー ( <Tab>key->enter value-><Tab>キー) で入力されると、新しく表示されたフィールドには移動せず、以前に表示されていたフィールドに移動します。

以下は単純化された例です。番号 1 のフィールドに何かを書き込むと、on change イベントがトリガーされ、値 2 の入力が表示されますが、次にフォーカスされるものは表示されません。

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<form>
    <input id="input1" value="1" tabindex="1" onchange="$('#input2').show()">
    <input id="input2" value="2" tabindex="2" style="display: none;">
    <input id="input3" value="3" tabindex="3" onchange="$('#input4').show()">
    <input id="input4" value="4" tabindex="4" style="display: none;">
    <input id="input5" value="5" tabindex="5">
    <input id="input6" value="6" tabindex="6">
</form>

その複雑さのために、<Tab>キーを直接制御して演奏したくありません。また、onchange="$('#input2').show();$('#input2').focus()"すぐ隣の要素でない場合も同じコードを使うので、 は使えません。これを解決する方法はありますか？

コメント/提案をお寄せいただきありがとうございます。

4

1 に答える 1

0

jsFiddleの実用的なソリューションについては、ここをクリックしてください。

私はこれを機能させるためにキープレスを使用しました。

この例では、テキストフィールド1、3、および5を前後にタブ移動してから、テキストフィールド2を表示するテキストフィールド1の値を変更できます。次に、テキストフィールド2、3、5などにタブで移動できます。

私はあなたの挑戦を正しく理解し、これが役立つことを願っています。乾杯。

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
      $(document).ready(function() {
        $("input").live("keypress", function() {
          $(this).next().show()
        })
      })
    </script>

    <style type="text/css">
      .hidden {
        display:none;
      }
    </style>
</head>
<body>
<form>
    <input id="input1" value="1">
    <input id="input2" value="2" class="hidden">
    <input id="input3" value="3">
    <input id="input4" value="4" class="hidden">
    <input id="input5" value="5">
    <input id="input6" value="6" class="hidden">
</form>
</body>
</html>
于 2012-10-12T12:19:04.457 に答える