javascript - Bootstrap 模式上的 4 位数字形式

Question

我正在尝试使用 bootstrap 实现四位密码形式。

我正在尝试做类似于 iCloud 第二个 authentication 方法的事情。

我想将模式和自动对焦的内容集中在每个文本字段上。我使用过 jQuery Autotab，但它在 iOS 上不起作用。我的应用程序是一个移动网络应用程序，因此必须在 iOS 上工作。

你有什么建议？顺便说一句，有什么东西可以使用并节省时间吗？

<div id="digitPassword" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="digitPasswordlbl" aria-hidden="true">
        <div class="vertical-alignment-helper">
            <div class="modal-dialog modal-sm vertical-align-center">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="digitPasswordlbl">Enter your four-digit password:</h4>
                    </div>
                    <div class="modal-body" style=".row {text-align: center}">
                            <input type="hidden" name="formType" value="confirmPassword">
                            <div class="form-group">
                                <div class="col-sm-5">
                                    <input name="firstdigit" id="firstdigit" class="digit" type="password" required id="firstdigit" size="1" maxlength="1">
                                    <input name="secondtdigit" class="digit" type="password" required id="firstdigit" size="1" maxlength="1">
                                    <input name="thirddigit" class="digit" type="password" required id="thirddigit" size="1" maxlength="1">
                                    <input name="fourthdigit" class="digit" type="password" required id="fourthdigit" size="1" maxlength="1">
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-9 col-sm-offset-3">
                                    <!-- Do NOT use name="submit" or id="submit" for the Submit button -->

                                    <button type="submit" class="btn btn-default digit">Confirm</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>

CSS:

$( document ).ready(function() {
            $('#digitPasswordbtn').click(function() {
                $('#digitPassword').modal('show');
                $('.digit').autotab('nospace', 'filter', { format: 'number', target: '#firstdigit' });
                });
            });

Answer 1

要使内容居中，您可以使用 Bootstrap 提供的 text-center 类。

要在模式中实现自动对焦，您必须使用模式事件，并且为了将选项卡控制转移到下一个输入，您可以使用这篇文章中引用的小 jQuery 代码:Take focus on next input after key up using Jquery。

看看这个 fiddle :JSFIDDLE

希望对您有所帮助。