前端

How Smart Tools Are Shaping the Future of Creative Work

Eric Chuang
2022-06-23

在將網頁交付給客戶時,客戶回饋說「日期欄位應該要鎖住」,因此在 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();
    });
});

參考資料

Sign up for our newsletter

Subscribe to our newsletter to receive the latest updates, expert insights, and practical tips directly in your inbox. Stay informed with content designed to help you grow.

+480.000 happy customers

Gain more with expert solutions

Unlock the full potential of your business with our expert solutions. Our team provides tailored strategies, professional guidance, and actionable insights to help you achieve better results.

  • Eric Chuang
  • •
  • 2025-01-23
如何同時使用 Webinoly 與 Cloudflare 保護網站安全

在社群夥伴勇哥的文章〈Webinoly 最新版快速安裝〉中,提到使用 Webinoly 來建立 WordPre […]

主機