javascript - Google 表单保存在 Excel 工作表中

Question

我制作了一个表格格式的表格。我希望表内的输入字段在达到最大长度后重点关注下一个。我使用了 jquery 代码，但它仅适用于输入，不适用于 td。代码如下:

$(".inputs").keyup(function () {
    var index = $('.inputs').index(this) + 1;
    $('.inputs').eq(index).focus();
});

和table html代码:

<form>
   <table>

        <tr>

            <td class="custom_header">First Name* </td>

            <td><input class="input" type="text" maxlength="1"  required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

            <td><input class="input" type="text" maxlength="1" required/></td>

         </tr>
   </table>

</form>

由于此表单有如此多的输入，如何将其提交为 Google 表单？

Answer 1

尝试使用tabinex <input /> 中的属性。以下是工作示例:

<form>
        <table>
            <tbody>
                <tr>
                    <td>
                        <input tabindex="0" class="input" type="text" maxlength="1"  required/>
                    </td>
                    <td>
                        <input tabindex="1" class="input" type="text" maxlength="1"  required/>
                    </td>
                    <td>
                        <input tabindex="2" class="input" type="text" maxlength="1"  required/>
                    </td>
                    <td>
                        <input tabindex="3" class="input" type="text" maxlength="1"  required/>
                    </td>
                    <td>
                        <input tabindex="4" class="input" type="text" maxlength="1"  required/>
                    </td><br />
                    <td>
                        <input tabindex="5" class="input" type="text" maxlength="1"  required/>
                    </td>
                    <td>
                        <input tabindex="6" class="input" type="text" maxlength="1"  required/>
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
    $(document).ready(function() {
        $('.input').on('keyup', function(e) {
            var input = $(this), 
            nextInput = $('input[tabindex="' + (Number(input.attr('tabindex')) + 1) + '"]');

            // If current input value is reached max limit and if there is any next input
            // then it will make focus to it.
            input.val().length == input.attr('maxlength') && nextInput.length && nextInput.focus()
                });
                });
    </script>