时间戳

首页 > 解决方案 > 从 iOS 9.3.5 到最新 iOS 的 HTML 差异

javascript - 从 iOS 9.3.5 到最新 iOS 的 HTML 差异

问题描述

我的任务是创建一个简单的页面，该页面将比较两个字符串以查看它们是否匹配。扫描枪用户会单独使用输入的字符，并且在发现 iOS 讨厌.focus()字段后，因为键盘总是在选择字段时打开。

在我提供的 iPad 上进行测试时（最新的 iOS）一切正常，当我们准备发布时，我们发现用户将使用的 iPad 是老一代，并锁定在 9.3.5。

“没问题”我想，但我错了。页面正在加载，但似乎没有一个 JS 启动。

我在这里包括了我的来源，我认为它有足够的文档记录并且非常直接。我并不是非常精通 iPad 的测试，尤其是任何 iOS，所以我希望任何熟悉 iOS HTML/JS 陷阱的人都可以快速浏览一下，看看是否有任何危险信号。

我不会撒谎，我喜欢反馈，但是按照最初给我的时间线，这个过程本身可以被认为是相当笨拙的。我很乐意提供反馈，但请理解我没有时间从根本上改变它的工作方式。

谢谢！

    <head>

        <body type="original">

            <div>

                <center>

                    <br><br><img src="Logo.png" alt="Logo"><br>

                </center>

            </div>

            <div>

                <center>

                    <input id="promptField" value="Press clear to start scanning." type="focus" oninput ="allocateValue()">

                    <input id="serialInputOne" onclick="document.getElementById('promptField').focus();" type="text"><br>

                    <input id="serialInputTwo" onclick="document.getElementById('promptField').focus();" type="text"><br>

                    <input id="clear" onclick ="clearFields()"  type="submit" value="Clear">

                </center>

            </div>

        </body>

        <script type="text/javascript">


            function allocateValue(){
                // Timeout length (300) calibrated to how long the gun takes to register, at the moment, the longest string we handle: 8.  If we start using longer strings, setTimeout length should be adjusted accordingly.
                setTimeout(function(){
                    let clearCode = 11212001;
                    if(filterNumbers(document.getElementById('promptField').value) === undefined){
                            return false;
                    } else if (filterNumbers(document.getElementById('promptField').value) === clearCode){
                        // 11212001 is the Clear bar code output. Length is intentionally longer then our longest serial code to prevent a highly unlikely match. If we start using longer strings, Clear code should also be extended.
                        clearFields();
                    } else {
                        let serial = filterNumbers(document.getElementById('promptField').value).toString();
                        let inputOne = document.getElementById('serialInputOne').value;
                        let inputTwo = document.getElementById('serialInputTwo').value;
                        let errorCode = '*';
                        if (inputOne === "") {
                            document.getElementById('serialInputOne').value = serial;
                            document.getElementById('promptField').value = 'Scan a matching serial number.';
                            return;
                        }else if(inputTwo === "" || document.getElementById('promptField').value[0] ===errorCode) {
                            // Using "*" as a condition helps future implementations.  If any additional unique errors need to be added, have it start with the asterisk. 
                            document.getElementById('serialInputTwo').value = serial;
                            inputTwo = serial;
                            checkFields(inputOne, inputTwo);
                        }else if(inputOne === inputTwo){
                            additionalCheckResetFields();
                        }
                    }
                }, 300)
            }

            function checkFields(inputOne, inputTwo) {
                if (inputOne === inputTwo) {
                    document.body.style.backgroundColor = "#27AE60";
                    document.getElementById('promptField').value = 'Match! A new process will automatically start when you scan again.';
                }else{
                    document.body.style.backgroundColor = "#C9282E";
                    document.getElementById('promptField').value = '**Not a match. Either scan it\'s correct match, or Clear with the button or scan the Clear bar code.**';
                }
            }

            function additionalCheckResetFields(){
                document.getElementById('serialInputOne').value = filterNumbers(document.getElementById('promptField').value);
                document.getElementById('promptField').value = 'Scan a matching serial number.';
                document.getElementById('serialInputTwo').value = '';
                document.body.style.backgroundColor = "#1B46A8";
            }

            function clearFields(){
                document.getElementById('promptField').value = 'Start with your first serial number.';
                document.getElementById('serialInputOne').value = '';
                document.getElementById('serialInputTwo').value = '';
                document.body.style.backgroundColor = "#1B46A8";
                document.getElementById('promptField').focus();
            }

            function filterNumbers(field){
                // returns a array, indexing each number. Since the none of the promptField values have numbers, it will only return one number: the serial input.
                // if a promptField is ever changes where a number is involved, the serial is always located at the end of the field, thus the last index of numbers array
                // is returned automatically.
                if (!isNaN(field[field.length - 1])) {
                    let numbers = field.match(/\d+/g).map(Number);
                    return numbers[(numbers.length - 1)];
                }
            }

        </script>

        <style type="text/css">

            input[type=text], select {
                padding: 10px 20px;
                margin: 30px;
                border: 6px solid #C9282E;
                border-radius: 400px;
                box-sizing: content-box;
                height: 180px;
                width: 72%;
                text-align: inherit;
                font-size: 135px;
                user-select: none;
            }

            input[type=submit] {
                width: 40%;
                height: 80px;
                background-color: #50505C;
                border: 6px solid #C9282E;
                border-radius: 20px;
                color: white;
                padding: 14px 20px;
                margin: 8px 0;
                cursor: pointer;
                font-size: 25px; 
            }

            input[type=focus]{
                padding: 10px 20px;
                margin: 30px;
                background-color: #50505C;
                border: 6px solid #C9282E;
                border-radius: 20px;
                color: white;
                box-sizing: content-box;
                height: 25px;
                width: 80%;
                text-align: center;
                font-size: 18px;
            }

            body[type=original]{
                background-color: #1B46A8;
            }

            img{
                height: 15%;
                width: 15%;
            }

        </style>

    </head>



</html>

标签： javascripthtmlios

解决方案

推荐阅读