วิธีแก้ iOS Safari Javascript New Date แล้วมีค่าเป็น NaN

วันนี้เจอปัญหาที่แปลกประหลาดของ iOS Safari ที่ไม่สามารถ new Date() ออกมาได้ มันกลายเป็นค่า NaN (Not a number) ซะอย่างงั้น

ลองค้นดูก็เจอว่ามันเป็นเฉพาะ iOS Safari จริงๆ เจอวิธีแก้อยู่หลายอัน บางคนก็บอกให้ไปใช้ DateJS ช่วยเอาเลย แต่มันก็ดูยุ่งยากไปหน่อย

เลยลองหาดูมีวิธีแก้ง่ายๆ อยู่เหมือนกัน จากเว็บนี้
https://coderwall.com/p/gvwb9g/fix-invalid-date-on-safari-ie

//  Safari & IE browsers do not support the date format “yyyy-mm-dd”
const fixDateForAllBrowsers = dateString => dateString.replace(/-/g, '/');

ก็เออแก้ได้จริงๆ ด้วยนะ คือเจ้า iOS Safari มันไม่ยอมให้เราใช้การ New Date เป็น YYYY-MM-DD เท่านั้นแหละ ถ้าเปลี่ยนเป็น YYYY/MM/DD มันก็จะใช้ได้ละ

ขนาดภาพที่ Mobile Safari (iOS) สามารถแสดงผลได้เต็มที่

วันนี้เจอปัญหาที่เปิดภาพบน iPad แล้วมันไม่คมชัดเหมือนดูบนจอ Desktop เมื่อดูผ่าน Mobile Safari และ Chrome บน iPad เลยเกิดความสงสัยว่าทำไมถึงเจอปัญหาแบบนี้

เลยนึกขึ้นได้ว่าก่อนหน้านี้ก็เคยเจอปัญหาคล้ายๆ กันมาแล้ว แต่เป็นไฟล์ .png ที่มันจะมี limit ของตัว iPad, iPhone ที่มันไม่สามารถแสดงผลภาพที่มีขนาดใหญ่มากเกินความจุของ RAM เครื่องได้

ซึ่งคุณ William Malone ทำหน้าทดสอบขนาดไว้ให้ http://www.williammalone.com/articles/html5-javascript-ios-maximum-image-size/ เรียบร้อย

คือขนาดความกว้าง x ความยาวของรูป จะต้องไม่เกิน 5MP (สำหรับ iPhone 3GS จะเหลือ 3MP)

ทำให้ inputbox บน browser ของ iOS ไม่เป็นตัวใหญ่ในอักษรตัวแรก

พอดีว่าทำเว็บไซต์ที่ให้ user สามารถใช้งานได้บนมือถือด้วย แต่เจอปัญหาแปลกๆ ที่เวลากรอกข้อมูล username ลงไปแล้ว webkit browser บน iOS หรือ iPhone,iPad มันจะทำให้ตัวอักษรตัวแรกเป็นตัวใหญ่โดยอัตโนมัติทุกครั้ง ซึ่งพอส่งค่าไปตรวจสอบก็จะพบว่าไม่ตรงกับข้อมูลที่เรามี

ซึ่งเราก็อาศัยการแก้ไขโดยการแปลงค่าที่ส่งมาให้เป็นตัวเล็กทั้งหมดก่อนที่จะเช็ค ซึ่งก็ใช้งานได้ปกติดี

แต่วันนี้เจอวิธีการที่จะทำให้ช่องกรอกข้อมูล มันไม่เซ็ตอักษรตัวแรกเป็นตัวใหญ่แล้วที่นี่
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/DesigningForms/DesigningForms.html#//apple_ref/doc/uid/TP40006512-SW1

โดยการใส่ attribute เพิ่มลงไปใน input ว่า
autocapitalize="none"

ตัวอย่างที่เค้ายกมาบนเว็บก็จะเป็นแบบนี้ 

<form autocapitalize="words">

First Name: <input name="first-name">

Last Name: <input name="last-name">

State: <input name="state" autocapitalize="characters">

Username: <input name="username" autocapitalize="none">

Comment: <textarea name="comment" autocapitalize="sentences"></textarea>

</form>

แต่ลองแล้วบน <iOS4 จะต้องใช้เป็น autocapitalize="off"