Question

您好我正在创建一个测试应用。当用户单击文本字段名称或cardNumber时，扫描信用卡功能适用于我。我的问题是：

我希望用户点击＆＃34; button1＆＃34; - 这应该打开相机扫描卡并填充现有的文本字段，即名称，卡号和有效期。在奖金上它还应该显示哪些字段无法填充。
在相机屏幕上扫描卡片时，我可以添加其他文字，例如＆＃34;您的详细信息将不会被存储＆＃34;

感谢您的帮助。我的HTML代码如下：

<html>
<head>
    <title>Scan Credit card</title>
</head>
<body>
    <input type="button" id="button1" value="Scan Your card" />
    <form>
        <!-- NAME -->
        <label for="Name">Name</label>
        <input type="text" placeholder="Name on card">

        <!-- CC# -->
        <label for="cardNumber">Card</label>
        <input name="cardNumber" type="text" placeholder="4514..." pattern="[0-9]*">
        <br>

        <label>Expiration Date</label>

        <!-- YEAR -->
        <select name="year">
            <option value="2015">2015</option>
            <option value="2016">2016</option>
            <option value="2017">2017</option>
        </select>

        <!-- MONTH -->
        <select name="month">
            <option value="1">01</option>
            <option value="2">02</option>
            <option value="3">03</option>
        </select>

        <br>

        <input type="reset">
    </form>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script>
        var events = "focus input change blur"
        var states = events.split(" ")
        var MAX_DELAY = 100;

        var state = 0;
        var start;

        $("input[name=cardNumber]").on(events, function(event) {
            if (event.type == states[0]) {
                state = 1;
                start = event.timeStamp;
            } else if (event.type == states[state]) {
                state++;
                if (state == states.length && (event.timeStamp - start < MAX_DELAY)) {
                    state = 0;
                    $(document).trigger("autofill");
                }
            } else {
                state = 0;
            }
        });

        $(document).on("autofill", function() {
            alert("Autofill Detected");
        });

        $("#button1").click(function () {

        });       

    </script>
</body>
</html>

iOS Safari通过单击按钮触发扫描信用卡

0 个答案: