Question

我工作的网页上的表单在桌面上完美运行，但无法在移动设备（iPad和iPhone）上运行。当您点击＆＃34;提交消息＆＃34;按钮，没有任何反应。确认消息没有出现，我没有收到电子邮件（使用后端的nodemailer向我发送电子邮件）。我尝试过以下方法：

使用相同的＆＃39;提交＆＃39;桌面和移动设备上表单上的事件监听器
在按钮上添加一个事件监听器，用于＆＃39; touchend＆＃39;移动活动
使用HTMLFormElement对象中的onsubmit属性而不是使用事件侦听器

这是HTML：

<section id="contactContainer">
  <section id="form"><a id="contact"></a>
    <h2>Contact Me</h2>
    <form action="/formSubmission" method="post">
      <label for="reason">Reason for reaching out:</label>
      <select name="reason">
        <option value="Marketing">Marketing</option>
        <option value="Web Development">Web Development</option>
        <option value="other">Other</option>
      </select><br>
      <div>
        <input type="text" name="firstName" placeholder="First Name" class="name" required>
        <input type="text" name="lastName" placeholder="Last Name" class="name" required>
      </div>
      <input type="text" name="company" placeholder="Company" required><br>
      <input type="text" name="email" placeholder="Email Address" required><br>
      <textarea name="message" placeholder="Let me know what you're looking for."></textarea>
      <input type="submit" value="Send Message" name="submit">
    </form>
  </section>

  <section id="confirmation">
    <h2>Thanks for sending! I'll be in touch shortly.</h2>
  </section>
</section>

和香草JS：

var form = document.querySelector('form'),
    button = document.querySelector('form input[name="submit"]'),
    confirmation = document.querySelector('#confirmation h2'),
    formSection = document.querySelector('#form');

form.addEventListener('submit', submit);
button.addEventListener('touchend', submit);

function sortFormData(form) {
  var parsedForm = {},
      elements = [...form.elements];


  elements.forEach(element => {
    if(element.name) { 
      parsedForm[element.name] = element.value;
    }
  })

  return JSON.stringify(parsedForm);
}


//Form confirmation

HTMLElement.prototype.makeTransparent = function() {
  this.style.opacity = 0;
  this.style['z-index'] = 0;
}

HTMLElement.prototype.appear = function() {
  this.style['z-index'] = 1;
  this.style['font-size'] = '0px';
  this.style.opacity = 1;

  if(this.style['font-size'] === '0px') {
    console.log('Animation start.');
  }

  this.classList.add('submitted');
}

//Helper function

function submit(e) {
  e.preventDefault();
  var formData = sortFormData(form);
  var request = new XMLHttpRequest()
  request.open('POST', './formSubmission', true);
  request.setRequestHeader('Content-type', 'application/json');
  request.send(formData);

  formSection.makeTransparent();
  confirmation.appear();
}

感谢任何帮助！

Answer 1

我建议您检查事件处理程序是否首先在移动设备和平板电脑上启动。如果该功能在桌面上运行正常但在移动设备上无效，我认为很可能在移动设备上根本不会触发点击事件。

样式问题或类似问题可能会使您的按钮停留在移动设备/平板电脑中的某些其他HTML元素下，并且当您按下按钮时，不会触发点击事件。

您可以在浏览器中使用开发人员工具来查明，并检查移动视图上的按钮区域。

Answer 2

我弄明白这是什么。我在sortFormData函数中使用了spread运算符，它在其轨道中停止了提交。当我更新代码时，它完美地工作。新代码：

function sortFormData(form) {
  var parsedForm = {};
  var elements = Array.prototype.map.call(form, function(ele) {
    return ele;
  });


  elements.forEach(element => {
    if(element.name) { 
      parsedForm[element.name] = element.value;
    }
  })

  return JSON.stringify(parsedForm);
}

表单提交按钮无法在移动设备上运行（iPhone和iPad）

2 个答案: