Javascript không hoạt động cho các phiên bản iOS cụ thể của iPhone

[ad_1]

Tôi có mã javascript trên trang web của mình. Nó hoạt động cho máy tính để bàn, android,
Tuy nhiên, nó không hoạt động đối với một số iPhone, từng phần mã của tôi, sự kiện nhập, sự kiện nhấp chuột

Hoạt động cho các mẫu và phiên bản iPhone này:

1. Iphone 13 phiên bản safari 16.6

2. Iphone 12 phiên bản safari 16.6

3. Iphone 13 phiên bản safari 16.5.1

4. Iphone 11 phiên bản safari 16.5

Nhưng mã của tôi không hoạt động với loại iPhone này:

1. Iphone 11 phiên bản safari 16.1

2. Iphone 11 phiên bản safari 16.3.1

3. Iphone XS Max phiên bản safari 16.5.1

4. Iphone Xr phiên bản safari 16.5.1

5. Iphone XR phiên bản safari 16.3.1

**Đây là mã của tôi:**

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    const header = document.querySelector(".header");
    const langSelect = document.querySelector("#lang_select");
    const langList = document.querySelector(".lang_list");

    header.addEventListener("click", function(event) {
      langList.style.display = langList.style.display === "none" ? "block" : "none";
      event.stopPropagation();
    });

    document.addEventListener("click", function(event) {
      if (!langSelect.contains(event.target)) {
        langList.style.display = "none";
      }
    });

    const fieldInputs = document.querySelectorAll(".field input");

fieldInputs.forEach(function(input) {
  input.addEventListener("focus", function() {
    this.parentElement.classList.add("active");
  });

  input.addEventListener("blur", function() {
    if (this.value === "") {
      this.parentElement.classList.remove("active");
    }
  });
});

let isFirstOpen = false;
  const firstBtn = document.querySelector("#firstBtn");
  const firstDrop = document.querySelector("#firstDrop");

  firstBtn.addEventListener("click", function(event) {
    isFirstOpen = !isFirstOpen;

    if (isFirstOpen) {
      firstDrop.style.display = "block";
    } else {
      firstDrop.style.display = "none";
    }

    event.stopPropagation();
  });

  document.addEventListener("click", function(event) {
  if (
    !event.target.closest("#firstBtn") &&
    !event.target.closest("#firstDrop")
  ) {
    const firstDropElement = document.querySelector("#firstDrop");
    if (firstDropElement.style.display !== "none") {
      firstDropElement.style.display = "none";
      isFirstOpen = false;
    }
  }
});

  



 

      

  document.querySelector("#firstInput input").addEventListener("input", function() {
  const inputVal = this.value;
  let num = inputVal.replace(/[^0-9.]+/g, "");
  let regex = /^[+-]?(\d*\.\d+|\d+\.\d*)([eE][+-]?\d+)?$/;

  if (!regex.test(num)) {
    if (num === ".") {
      num = "";
    } else {
      num = num.replace(/(?<=\..*)\./, "");
    }
  }

  this.value = num;

  const firstCryptoCurrencySymbol = document.querySelector("#currency1 a").dataset.cur;
  const secondCryptoCurrencySymbol = document.querySelector("#currency2 a").dataset.cur;

  fetch("/calculateExchangeRate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      firstCryptoCurrencySymbol: firstCryptoCurrencySymbol,
      secondCryptoCurrencySymbol: secondCryptoCurrencySymbol
    })
  })
  .then(res => res.json())
  .then(data => {
    const exchangeRate = data.rate;
    document.querySelector("#secondInput input").value = num * exchangeRate;
  });
});



document.querySelector("#secondInput input").addEventListener("input", function() {
  const inputVal = this.value;
  let num = inputVal.replace(/[^0-9.]+/g, "");
  let regex = /^[+-]?(\d*\.\d+|\d+\.\d*)([eE][+-]?\d+)?$/;

  if (!regex.test(num)) {
    if (num === ".") {
      num = "";
    } else {
      num = num.replace(/(?<=\..*)\./, "");
    }
  }

  this.value = num;

  const firstCryptoCurrencySymbol = document.querySelector("#currency1 a").dataset.cur;
  const secondCryptoCurrencySymbol = document.querySelector("#currency2 a").dataset.cur;

  fetch("/calculateExchangeRate", {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify({
      firstCryptoCurrencySymbol: firstCryptoCurrencySymbol,
      secondCryptoCurrencySymbol: secondCryptoCurrencySymbol
    })
  })
    .then(res => res.json())
    .then(data => {
      const exchangeRate = data.rate;
      document.querySelector("#firstInput input").value = num / exchangeRate;
    });
});




         
const optionElements = document.querySelectorAll(".option");

optionElements.forEach(function(option) {
  option.addEventListener("click", function(event) {
    if ('ontouchstart' in window || navigator.maxTouchPoints) {
      event.preventDefault();
    }

    let dataCur = this.dataset.cur;
    let imageUrl = this.querySelector(".pm_select_img img").src;
    let optionText = this.querySelector("span").textContent;

    document.querySelector("#firstBtn .pm_select_img img").src = imageUrl;
    document.querySelector("#firstBtn span").textContent = optionText;
    document.querySelector("#firstBtn").dataset.cur = dataCur;

    document.querySelector("#currency1 .pm_select_child").dataset.cur = dataCur;
    document.querySelector("#currency1 .pm_select_child").textContent = dataCur;

    document.querySelector("#hiddenInput").value = dataCur;

    document.querySelector("#amount_send1").dataset.cur = dataCur;
    document.querySelector("#amount_send1 ~ .addons").textContent = dataCur;

    const secondDataCur = document.querySelector("#currency2 a").dataset.cur;

    fetch("/calculateExchangeRate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        firstCryptoCurrencySymbol: dataCur,
        secondCryptoCurrencySymbol: secondDataCur
      })
    })
    .then(res => res.json())
    .then(data => {
      const exchangeRate = data.rate;
      document.querySelector(".rate_info").textContent = `1 ${dataCur} = ${exchangeRate} ${secondDataCur}`;
    });

   
    event.stopPropagation();
  });
});

document.addEventListener("click", function() {
  document.querySelector("#firstDrop").style.display = "none";
});



const optionElementsFirst = document.querySelectorAll(".option1");

optionElementsFirst.forEach(function (option) {
  option.addEventListener("click", function (event) {
    if ("ontouchstart" in window || navigator.maxTouchPoints) {
      event.preventDefault();
    }

    let dataCur = this.dataset.cur;
    let imageUrl = this.querySelector(".pm_select_img img").src;
    let optionText = this.querySelector("span").textContent;

    document.querySelector("#secondBtn .pm_select_img img").src = imageUrl;
    document.querySelector("#secondBtn span").textContent = optionText;
    document.querySelector("#secondBtn").dataset.cur = dataCur;

    document.querySelector("#currency2 .pm_select_child").dataset.cur = dataCur;
    document.querySelector("#currency2 .pm_select_child").textContent = dataCur;

    document.querySelector("#hiddenInput2").value = dataCur;

    document.querySelector("#amount_send2").dataset.cur = dataCur;
    document.querySelector("#amount_send2 ~ .addons").textContent = dataCur;

    const secondDataCur = document.querySelector("#currency1 a").dataset.cur;

    fetch("/calculateExchangeRate", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        firstCryptoCurrencySymbol: dataCur,
        secondCryptoCurrencySymbol: secondDataCur,
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        const exchangeRate = data.rate;
        document.querySelector(".rate_info").textContent = `1 ${dataCur} = ${exchangeRate} ${secondDataCur}`;
      });

    document.querySelector("#secondDrop").style.display = "none";

    
    event.stopPropagation();
  });
});

document.addEventListener("click", function () {
  document.querySelector("#secondDrop").style.display = "none";
});


let isOpen = false;
const secondBtn = document.querySelector("#secondBtn");
const secondDrop = document.querySelector("#secondDrop");

secondBtn.addEventListener("click", function(event) {
  isOpen = !isOpen;

  if (isOpen) {
    secondDrop.style.display = "block";
  } else {
    secondDrop.style.display = "none";
  }

  event.stopPropagation();
});


document.addEventListener("click", function(event) {
  const secondBtn = document.querySelector("#secondBtn");
  const secondDrop = document.querySelector("#secondDrop");
  const isOpen = secondDrop.style.display !== "none";

  if (
    !event.target.closest("#secondBtn") &&
    !event.target.closest("#secondDrop")
  ) {
    if (isOpen) {
      secondDrop.style.display = "none";
    }
  }
});


  })

Những gì tôi đã thử:

– Tôi đang kiểm tra xem tôi có lỗi cú pháp không nhưng tôi không có lỗi nào cả
– Tôi đã nghĩ rằng tôi sử dụng một số chức năng nâng cao và tôi đã làm lại mã của mình bằng bong bóng nhưng điều đó không giúp ích được gì
– Tôi nghĩ rằng có vấn đề với sự kiện nhấp chuột nên tôi đã thêm sự kiện ever touch nhưng không giúp được gì
– Tôi đã thử sử dụng mô phỏng trên Mac, nhưng mã của chúng hoạt động hoàn hảo
– Tôi đã sử dụng mô phỏng trong trình duyệt và gặp vấn đề

Giải pháp 1

I had similar problem on some project before. It turned out there was some invisible div over the element that should fire an event. I've sorted out on Browserstack's iphone emulator with dev console.

[ad_2]