Physical Address

304 North Cardinal St.
Dorchester Center, MA 02124

解決手機版 input[type=”date”] 輸入欄位 readonly 屬性無效的問題

在將網頁交付給客戶時,客戶回饋說「日期欄位應該要鎖住」,因此在 HTML 中加入了 readonly 的屬性:

<input type="date" id="start-date" name="start-date" class="form-control" readonly aria-readonly="唯讀欄位" tabindex="-1"/>

但是後來客戶反應說在手機上仍然會跳出選擇日期的畫面。在使用「readonly attribute not working on mobile」搜尋了 Stack Overflow 之後,發現最後必須要用 JavaScript 來解決。因為是手機,因此要從 touchstart 這個事件著手調整。

document.querySelectorAll( 'input[type="date"][readonly]').forEach( input => {
    input.addEventListener( 'touchstart', function(e) {
        e.preventDefault();
    });
});

參考資料

預設圖片
Eric Chuang

正職是廣告行銷人員,因為 Google Tag Manager 的關係開始踏入網站製作的領域,進一步把 WordPress 當成 PHP + HTML + CSS + JavaScript 的學習教材。此外,因為工作的關係,曾經用 Automattic 的 Underscores (_s) 替客戶與公司官網進行全客製化佈景主題開發。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料