MM/DD/YYYY 형식으로 autocomplete="bday"를 사용하는 방법은 무엇입니까?

Question

입력 마스크를 <input type="text"> 上强制执行 MM/DD/YYYY 형식으로 사용하고 있습니다.

autocomplete="bday"을 사용하고 싶지만 WHATWG에서 지정한 하이픈 형식은 사용하고 싶지 않습니다.

이 경우 어떻게 해야 하나요? 모바일 브라우저(주로 iOS/Android)가 이 상자에 필드를 올바르게 입력할 것으로 예상할 수 있습니까?

Answer 1

다른 입력 대신 날짜 유형 입력을 사용하세요

이상적인 상황에서는 텍스트 유형이 아닌 날짜 유형을 입력해야 합니다. 이론적으로는 다음과 같은 장점이 있습니다:

• 사용자가 선호하는 지역으로 날짜를 입력하고 표시하세요
• 날짜 선택을 위한 달력 위젯 포함
• 일반적으로 항상 yyyy-mm-dd 형식의 유효한 날짜를 보장하는 기본 프런트 엔드 필드 유효성 검사

그러나 실제로는

• 날짜 입력 유형은 구형 브라우저/장치, 특히 일부 휴대폰에서는 지원되지 않습니다(결론은 이렇습니다!)
• 입력 필드 및/또는 관련 달력 위젯에 항상 쉽게 액세스할 수 있는 것은 아닙니다(아쉬운 일입니다!)
• 구성 요소의 정확한 모양을 제어할 수는 없습니다. (이상적으로는 크게 신경 쓰지 않아도 되지만 괜찮습니다.)

주어진 필드(여기서는 날짜)에 대해 가장 전문적으로 적절한 입력 유형을 사용하는 것이 일반적으로 할 수 있는 최선의 방법이며 장기적으로 사용자와 개발 관점 모두에서 확실히 도움이 될 것입니다. 완료/유지보수 관점. 이는 표준에 의해 보장됩니다. 즉, 사용자가 직접 아무것도 하지 않고도 시간이 지남에 따라 더 나은 지원을 기대할 수 있으며 기능이 갑자기 사라지지 않는다는 의미입니다.

그러나 특히 정확한 모양에 대한 통제력 상실과 현재 가장 중요한 휴대폰에 대한 지원 부족으로 인해 안타깝게도 선택적인 텍스트 유형 입력, 다소 접근 가능한 일련의 콤보 상자 및/또는 캘린더가 생성됩니다. 표준 입력 날짜뿐만 아니라 대부분의 경우 접근이 쉽지 않습니다.

날짜 입력을 사용할 수 없거나 사용을 원하지 않는 경우

자동 완성은 항상 yyyy-mm-dd 형식으로 필드를 채우는데, 이는 선호하는 형식과 충돌하므로 변경할 수 없습니다. 그래서 해결책이 많지 않습니다:

• 수용하는 입력, 특히 yyyy-mm-dd 및 mm/dd/yyyy를 허용하세요.
• 브라우저 자동 완성을 캡처하고 감지되면 yyyy-mm-dd를 mm/dd/yyyy로 변환합니다

둘 다 입력 필드를 덜 안정적이고 덜 신뢰할 수 있으며 사용자가 이해하기 어렵게 만듭니다. 모든 브라우저에서 브라우저 자동 완성을 안정적으로 감지하는 것은 쉽지 않거나 불가능할 수도 있습니다. 인터페이스에 "mm/dd/yyyy 형식으로 날짜 쓰기"라고 표시되고 필드에 yyyy-mm이 포함되면 사용자가 혼란스러워할 수 있습니다. - dd ( 어떤 형식을 사용해야 하나요? 어떤 형식이 올바른가요? 지금 현장에 무엇을 써야 할까요? 아니면 무엇을 지시해야 할까요?)

날짜 유형 입력은 원하든 원하지 않든 모든 번거로움을 없애줍니다. 이것이 저의 마지막 제안입니다. 귀하가 별도의 조치를 취하지 않아도 시간이 지남에 따라 접근성과 지원이 향상될 것으로 예상할 수 있습니다. 몇 년 전 도입된 날짜 입력 방식이 많이 개선되었습니다. 픽셀까지 완벽한 디자인은 잊어버리세요. 가능하다면 표준을 사용하세요.