1
  • モバイル Web アプリケーションには、注文入力フォームが含まれています。
  • 行には製品コードと数量が含まれます。
  • モバイル バーコード スキャナーはバーコードの後に​​入力を送信し、これによりフォームが送信されます。

入力時にフォーム送信を防止する方法: 入力はタブのように動作する必要があります。

  • 次の入力フィールドをアクティブにします。
  • 送信は、送信ボタンのみを使用して行う必要があります。

jQuery、jQuery-mobile、ASP.NET MVC4 を使用しています。アプリケーションは、Motorola MC2180 コンピュータで WebKit ベースのブラウザを使用して実行されています。これは最新のブラウザで、html5 をサポートしています。

データ入力ページ:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width" />
      <link href="/Scripts/jquery-mobile/jquery.mobile-1.3.2.css" rel="stylesheet"/>
      <script src="/Scripts/jquery/jquery-1.9.1.js"></script>
      <script src="/Scripts/jquery-mobile/jquery.mobile-1.3.2.js"></script>
      <script src="/Scripts/applibrary.js"></script>

    </head>
    <body>
  <div>  
    <form id='inputform' method="post" 
       action ="/Detail/SaveFullDocument">
      <input type="hidden" name="_rows" />
      <table id="tableId">
        <tr>
          <th>Code</th>
          <th>Quantity</th>
          <td>
            <input type="button" value="+" onclick="addRow('tableId')" /></td>
        </tr>

        <tr>
          <td>
            <input type="text" name="Product" /></td>
          <td>
            <input type="number" name="Quantity" /></td>
          <td>
            <input type="button" value="-" onclick="deleteRow(this)" /></td>
        </tr>
        <tr>
          <td>
            <input type="text" name="Product" /></td>
          <td>
            <input type="number" name="Quantity" /></td>
          <td>
            <input type="button" value="-" onclick="deleteRow(this)" /></td>
        </tr>
        ....
      </table>

        <input type="button" value="+" onclick="addRow('tableId')" />
        <input type="submit" value='Save' />
    </form>
      </div>
    </body>
    </html>
4

3 に答える 3

6 
$('#inputform').on('keydown', 'input', function (event) {
        if (event.which == 13) {
            console.log($(this));
            $(this).next('input').focus();
            event.preventDefault();
        }
});

$(this)入力時に次の要素にフォーカスする必要がある場合は、ターゲット要素になるようにすべての入力をループする必要はありません。

デモ

于 2013-10-26T13:44:11.330 に答える
0

次のようにjQueryでそれを防ぐことができます：

$(document).on('keyup', 'input', function(event){
    if(event.which()===13){ // 13 is the keyCode of enter Key
        event.preventDefault();
    }
});
于 2013-10-26T13:16:35.340 に答える
0

最初に、前の回答で説明したように、入力をキャッチしてから、次の入力フィールドを識別し、それに対して .focus() メソッドを呼び出します。

$(form).on('keyup', 'input', 
    function(event)
    {
        if(event.which() == 13)
        {
            event.preventDefault(); //this prevents the default, as was previouslynoted

            $.each($('input'), 
                function(index, input)
                {
                    if(input == this)
                    {
                       $('input')[index+1].focus();
                    }
                });
        }
    });
于 2013-10-26T13:22:25.863 に答える