表单提交按钮不适用于手机（iPhone和iPad）

我正在处理的网页上的表单在桌面上完美工作，但不适用于手机（iPad和iPhone）。当你点击“提交消息”按钮时，没有任何反应。确认消息没有出现，我没有收到电子邮件（在后端使用nodemailer发送给我一封电子邮件）。我尝试了以下内容：台式机和移动表单提交按钮不适用于手机（iPhone和iPad）

添加按钮的事件侦听器移动

使用“touchend”事件，使用表上相同的“提交”事件侦听器

在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(); 
}

任何帮助表示赞赏！

来源

2017-10-13 Dan Hisey

我建议你检查事件处理程序是否先在手机和平板电脑上触发。如果该功能在桌面上运行良好，但在移动设备上运行良好，我认为很可能在移动设备上完全没有触发点击事件。

这可能是一个风格问题，或者类似的东西，使下移动/平板电脑的一些其他HTML元素的按钮住宿，当你在按钮选项卡，则不会触发click事件。

您可以通过在浏览器中使用开发工具找出它，并检查移动视图上的按钮区域。

来源

2017-10-13 03:58:14

我想出了这是什么。我正在使用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); 
}

来源

2017-10-13 23:40:38

表单提交按钮不适用于手机（iPhone和iPad）

回答

相关问题