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();
});
});參考資料
