-
sw3330Asked on June 1, 2020 at 3:30 PM
Hi,
Attached please see the question I set in my form:
I hope to set it such that the answer has to start with @. Currently, I am using the 'Default Value' to pre-populate @ in the field. However, is it possible to use mask features so that users cannot delete the @ in the answer box?
Thank you,
Suyuan
-
Patrick_RReplied on June 1, 2020 at 8:27 PM
Hi Suyuan! Let me look into this. I'll get back to you with a solution shortly.
Thank you!
-
Patrick_RReplied on June 1, 2020 at 8:50 PM
Hi! Input Masking won't be a good idea in your case, for two reasons:
1. There is no support for special characters. So, we can't force a user to only use the @ symbol in the beginning.
2. With input masking, you're bound to limit the number of characters, which is not suitable for your case. Twitter usernames are not bound by the character limit.Basically Input Masking can't be used as Regex. However, a workaround would be to use a CSS based solution.
Please have a look at this form: https://form.jotform.com/201527332251040
Try to enter any value and you'll understand how this works.The CSS applied here will display the @ symbol permanently. User only needs to input his username.
If you find this code useful, then you can use the following CSS code to achieve the same effect.
#cid_3{
position: relative;
}
#cid_3::before{
content: "@";
position: absolute;
font-size: 16px;
left: 5px;
top: 10px;
}
#input_3{
padding-left: 21px;
}Please note: In case you're using a different theme (I am using the "Upcoming" theme) then you might face some issue with the @ symbol alignment. In such a case, just get back to us and we'll do the required changes in the code to make it work on your Form.
I hope this helps. Fir further queries, feel free to get back to us.
-
sw3330Replied on June 1, 2020 at 9:28 PMHi Patrick_R,
Thank you very much for your reply.
I studied the CSS code and applied it to my form as:
#cid_53::before {
content : "@";
position : absolute;
font-size : 16px;
left : 5px;
top : 10px;
}
#input_53 {
}
However the @ symbol was added before the text box as below. Is it due to the position parameter?
Thank you,
Suyuan
... -
sw3330Replied on June 1, 2020 at 10:28 PMHi Patrick_R,
My problem got solved. Thanks a lot!
Best,
Suyuan
... -
Kiran Support Team LeadReplied on June 2, 2020 at 2:41 AM
Glad to see that you were able to fix the issue with the field. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.
Thank you for using JotForm!