Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
JaneSjs opened this issue Jun 18, 2024 · 1 comment · Fixed by #8447
Closed

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

JaneSjs opened this issue Jun 18, 2024 · 1 comment · Fixed by #8447
Assignees
Labels
enhancement input_mask user issue An issue or bug reported by users
Milestone

Comments

@JaneSjs
Copy link
Contributor

JaneSjs commented Jun 18, 2024

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 JaneSjs added enhancement user issue An issue or bug reported by users input_mask labels Jun 18, 2024
OlgaLarina pushed a commit that referenced this issue Jun 19, 2024
OlgaLarina pushed a commit that referenced this issue Jun 20, 2024
tsv2013 pushed a commit that referenced this issue Jun 20, 2024
…ber Input Type (#8447)

* resolve #8431 Input Type and Masked Input - Enable Pattern Mask Input for Phone Number Input Type

* work for  #8431 Input Type and Masked Input - Enable Pattern Mask Input for Phone Number Input Type

---------

Co-authored-by: OlgaLarina <[email protected]>
@RomanTsukanov RomanTsukanov changed the title Input Type and Masked Input - Enable Pattern Mask Input for Phone Number Input Type Input masks are unavailable for the Phone Number input type Jun 25, 2024
@OlgaLarina OlgaLarina added this to the v1.11.4 milestone Jun 25, 2024
@JaneSjs JaneSjs reopened this Jul 24, 2024
@JaneSjs
Copy link
Contributor Author

JaneSjs commented Jul 24, 2024

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.

@JaneSjs JaneSjs closed this as completed Jul 24, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement input_mask user issue An issue or bug reported by users
Projects
None yet
3 participants