surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.12k stars 802 forks source link

Input masks are unavailable for the Phone Number input type #8431

Closed JaneSjs closed 2 months ago

JaneSjs commented 3 months ago

IMPLEMENTED

Since SurveyJS v1.11.4, you can specify pattern masks for text input fields with inputType: "tel".


T18644 - text input phone fails with mask & Safari autofill https://surveyjs.answerdesk.io/internal/ticket/details/T18644

If you want to apply a specific phone number format, e.g. +1 (234) 555-12-34, you can enable the pattern mask input functionality. However, the input mask currently does not support any input type option, including the phone number input type (<input type="tel">).

However, it may be useful to enable the masked input along with the "tel" input type. As stated at MDN, when the "tel" input type is enabled, the input value is not automatically validated to a particular format before the form can be submitted, because formats for telephone numbers vary so much around the world. However, this input type is useful because it serves another purpose: the most quickly apparent of these is that mobile browsers — especially on mobile phones — may opt to present a custom keypad optimized for entering phone numbers.

JaneSjs commented 2 months ago

Excellent, working in Chrome as expected now! However, on Safari the built-in autofill isn't working yet. When you click the autofill control, it's not bringing up the option to populate with a phone. See attached video.

Posted here.