Блог

Главная - Вопросы по программированию - Почему событие «щелчок» не срабатывает на iPhone 6?

Почему событие «щелчок» не срабатывает на iPhone 6?

#javascript #html #ios #ajax

#javascript #HTML #iOS #аякс

Вопрос:

Итак, мое веб-приложение работает на macOS 10.13 (Chrome), iPhone XR (Safari), iPhone SE (Gen 1, Safari). Однако, когда я пытаюсь это сделать на своем iPhone 6, некоторые из моих кнопок не нажимаются… Как вы можете видеть во фрагменте кода, это работает практически со всем (я не пытаюсь поддерживать IE или действительно старые браузеры), но это просто ничего не делает на iPhone 6 (safari)

 function checkID(a, b) {
  if (document.getElementById(a)) {
    if (document.querySelector('#'   a).contains(b.target)) {
      return true;
    }
  }
}
document.addEventListener('click', function(e) {
  if (checkID('loginSubmit', e)) {
    document.getElementById("loginSubmit").innerHTML = "clicked!";
    var username = document.getElementById('loginUsername').value;
    var password = document.getElementById('loginPassword').value;
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (this.readyState == 4 amp;amp; this.status == 200) {
        //Do something
      }
    };
    xhttp.open("POST", "https://example.com/", true);
    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xhttp.send("password="   password   "amp;username="   username);
  }
}); 
 .login {
  width: calc(100% - 16px);
  padding-left: 8px;
  padding-right: 8px;
  padding-top: 8px;
  padding-bottom: 15px;
}

.login p {
  font-size: 16pt;
  font-weight: bold;
}

.login-btn {
  width: 100%;
  background: #68AFD2;
  color: white;
  font-weight: bold;
  text-align: center;
  margin-top: 12px;
  border-radius: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16pt;
}

.login-btn:hover {
  cursor: pointer;
}

.login-input {
  width: calc(100% - 14px);
  border: 1px solid rgb(240, 240, 240);
  padding-right: 6px;
  padding-left: 6px;
  padding-top: 10px;
  padding-bottom: 10px;
  font-size: 16px;
  border-radius: 6px;
  background: white;
} 
 <div>
  <div class='login'>
    <p>Login</p>
    <input class='login-input' id='loginUsername' type='text' name='username' placeholder='username...' required>
    <input style='margin-top:6px' class='login-input' id='loginPassword' type='password' name='password' placeholder='password...' required>
    <div id='loginSubmit' class='login-btn'>Login</div>
  </div>
</div>

Комментарии:

1. Пожалуйста, прекратите использовать divs вместо кнопок. <div class="btn" -> <button class="btn"

2. @evolutionxbox использование кнопок вызывает проблемы с отображением во многих браузерах…

3. Проблемы с отображением? Не уверен, что я согласен с этим.

4. Какая версия iOS? — Также, пожалуйста, прочитайте benfrain.com/converting-divs-into-accessible-pseudo-buttons

5. Да. iOS 12.5.0 поддерживает querySelector caniuse.com/queryselector