Email Address Masking


#1

Hi! I wanted to create an input mask of Email address in which it will be set into this format: __@__. Can anyone help me? Thank you in advance.


#2

I’m not sure I understand the situation. When I think of “input mask” I think of something that forces a specific formatting for the value that’s entered, like a phone number adding parenthesis and dashes at standard places: (###) ###-####. Are you saying that, no matter what string of characters are entered, you want to insert an “@” at a specific position? Like, “Always insert an ‘@’ symbol eight spaces from the end,”?

If you’re talking about validating whether what was entered is an email address or not, there are a few posts on how to do that.


#3

do you mean that if the user inputs something like thisismyemail@gmail.com, on a click on a button, it will display something like "t*******@***.com"?


#4

So I what i meant by this is that when an input box is clicked, the standard format will be like this : @_ , in which the @ is already positioned in between the blanks, so user can only type a string/character before or after the @. Please see the attached photo.

email


#5

:grimacing: …that’s a little tricky…

So the big issue is that there are an indeterminate number of characters before and after the “@”.

The best method I can think of without resorting to JavaScript injection would be to employ some “smoke-and-mirrors” and use two inputs.

Input 1 takes in the text and passes it to Input 2 and appends an “@”. Then Input 1 brings Input 2 above it so you can see the text with the “@” but still keep keyboard focus on Input 1. Then, when someone clicks after the “@”, Input 2 gets focus and they just keep typing.

It’s not perfect. You wouldn’t be able to see the input caret for the first part of the address and deleting text from the front of the address after text has been added passed the “@” might be a little weird but it should be close.
Email_Mask.rp (46.1 KB)


#7

Thank you so much!! This really helps!