表單提交按鈕不適用於手機（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）

回答

相關問題