Question

I have make one demo program that can related to my original project. The demo secenario is like first i am entering number in tel-input with input box as per given below image.

一旦增加电话号码,就应当储存在当地储存。当点击“Validate”纽吨时,输入号也应储存在地方储存中。在更新网页后,该号码应当从当地储存中取回,并在电话号码栏目中填满。如果数字发生变化,则应在地方储存中保存最新数据,并显示有相应国旗的最新储存数字。

<!DOCTYPE html>
<html>

<head>
    <title>Mobile Number Validation</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"
        integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>

<body>
    <input type="tel" id="phone-input" name="phone-input">

    <!-- <script src="https://cdn.jsdelivr.net/npm/intl-tel-input@17.0.8/build/js/intlTelInput.js"></script> -->
    <script>
        const MphoneInputField = document.querySelector("#phone-input");
        const MphoneInput = window.intlTelInput(MphoneInputField, {
            utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js"
        });
        MphoneInput.setCountry("ae");
        var Flag;
        MphoneInputField.addEventListener("countrychange", function () {
            var countryCode = MphoneInput.getSelectedCountryData().iso2;
            MphoneInput.setCountry(countryCode);
            alert(countryCode);
            Flag=countryCode;
        });
        //MphoneInput.setCountry("ae");
        function validatePhoneNumber() {
            alert(Flag);
            const MphoneInputField = document.querySelector("#phone-input");
            const MphoneInput = window.intlTelInput(MphoneInputField, {
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
                initialCountry: Flag
            });
            var data1 = localStorage.getItem("SaveNum");
            MphoneInput.setNumber(data1);
            
            var phoneNumber = MphoneInput.getNumber();
            var isValid = MphoneInput.isValidNumber();
            console.log(phoneNumber);
            if (isValid) {
                // Valid mobile number
                console.log("Valid phone number:", phoneNumber);
                localStorage.setItem("SaveNum", phoneNumber);
            } else {
                // Invalid mobile number
                console.log("Invalid phone number:", phoneNumber);
            }
            
            if (localStorage.getItem("SaveNum") != null) {
                MphoneInput.setNumber(localStorage.getItem("SaveNum"));
                $("#phone-input").val(localStorage.getItem("SaveNum"));
            }
        }
        $(document).ready(function () {
            const MphoneInputField = document.querySelector("#phone-input");
            const MphoneInput = window.intlTelInput(MphoneInputField, {
                utilsScript: "https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
                initialCountry:  ae 
            });
            var data = localStorage.getItem("SaveNum");
            if (data != null) {
                MphoneInput.setNumber(data);
                $("#phone-input").val(data);
            }
        });
    </script>

    <button onclick="validatePhoneNumber()">Validate</button>
    <!-- <button onclick="GetValue()">GetValue</button> -->
</body>

</html>

i 已经做了一些工作,但在这个法典中,编号是第一次节省下来,显示完美,但在重新编造时,它并不悬挂其徽章旗帜和编号。

感谢帮助我的高级人士。

友情链接