jQuery Mask with optional char
I have been using jquery mask plugin in my application to mask some fields. It works fine. I have to mask car plates in brazilian format (3 letters and 4 numbers separeted by -) and the code bellow always worked fine:
$(".car-plate").mask("AAA-0000");
Now, I have to provide the new format which increase a optional letter, it means: AAAA-0000. I have to keep the current format to be compatible. Sometimes the car plate can be AAA-0000 and sometimes AAAA-0000. I have tried it:
var carMaskBehavior = function (val) {
return val.replace(/W/g, '').length === 8 ? 'AAAA-AAAA' : 'AAA-AAAA';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(carMaskBehavior.apply({}, arguments), options);
}
};
$('#car1').mask(carMaskBehavior, spOptions);
Jsbin: https://jsbin.com/zijayiwoxe/edit?html,js,console,output
I am trying just letters, but I do not know how to fix it to define the mask as user input the text to format AAA-9999 or AAAA-9999. How can I do this?
Thank you.
javascript jquery html jquery-mask
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
add a comment |
I have been using jquery mask plugin in my application to mask some fields. It works fine. I have to mask car plates in brazilian format (3 letters and 4 numbers separeted by -) and the code bellow always worked fine:
$(".car-plate").mask("AAA-0000");
Now, I have to provide the new format which increase a optional letter, it means: AAAA-0000. I have to keep the current format to be compatible. Sometimes the car plate can be AAA-0000 and sometimes AAAA-0000. I have tried it:
var carMaskBehavior = function (val) {
return val.replace(/W/g, '').length === 8 ? 'AAAA-AAAA' : 'AAA-AAAA';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(carMaskBehavior.apply({}, arguments), options);
}
};
$('#car1').mask(carMaskBehavior, spOptions);
Jsbin: https://jsbin.com/zijayiwoxe/edit?html,js,console,output
I am trying just letters, but I do not know how to fix it to define the mask as user input the text to format AAA-9999 or AAAA-9999. How can I do this?
Thank you.
javascript jquery html jquery-mask
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
add a comment |
I have been using jquery mask plugin in my application to mask some fields. It works fine. I have to mask car plates in brazilian format (3 letters and 4 numbers separeted by -) and the code bellow always worked fine:
$(".car-plate").mask("AAA-0000");
Now, I have to provide the new format which increase a optional letter, it means: AAAA-0000. I have to keep the current format to be compatible. Sometimes the car plate can be AAA-0000 and sometimes AAAA-0000. I have tried it:
var carMaskBehavior = function (val) {
return val.replace(/W/g, '').length === 8 ? 'AAAA-AAAA' : 'AAA-AAAA';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(carMaskBehavior.apply({}, arguments), options);
}
};
$('#car1').mask(carMaskBehavior, spOptions);
Jsbin: https://jsbin.com/zijayiwoxe/edit?html,js,console,output
I am trying just letters, but I do not know how to fix it to define the mask as user input the text to format AAA-9999 or AAAA-9999. How can I do this?
Thank you.
javascript jquery html jquery-mask
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
I have been using jquery mask plugin in my application to mask some fields. It works fine. I have to mask car plates in brazilian format (3 letters and 4 numbers separeted by -) and the code bellow always worked fine:
$(".car-plate").mask("AAA-0000");
Now, I have to provide the new format which increase a optional letter, it means: AAAA-0000. I have to keep the current format to be compatible. Sometimes the car plate can be AAA-0000 and sometimes AAAA-0000. I have tried it:
var carMaskBehavior = function (val) {
return val.replace(/W/g, '').length === 8 ? 'AAAA-AAAA' : 'AAA-AAAA';
},
spOptions = {
onKeyPress: function(val, e, field, options) {
field.mask(carMaskBehavior.apply({}, arguments), options);
}
};
$('#car1').mask(carMaskBehavior, spOptions);
Jsbin: https://jsbin.com/zijayiwoxe/edit?html,js,console,output
I am trying just letters, but I do not know how to fix it to define the mask as user input the text to format AAA-9999 or AAAA-9999. How can I do this?
Thank you.
javascript jquery html jquery-mask
javascript jquery html jquery-mask
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
asked Nov 15 '18 at 13:02
Felipe OrianiFelipe Oriani
28.5k1798160
28.5k1798160
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Just change the mask on the fly and allow an optional char to the end:
var spOptions = {
onKeyPress: function(val, e, field, options) {
var mask = "";
if (val.length === 8) {
mask = 'AAA-AAAAZ'
} else {
mask = 'AAAA-AAAA'
}
$('#car1').mask(mask, options);
},
translation: {
'Z': {
pattern: /[.]?/,
optional: true
}
}
};
$('#car1').mask('AAA-AAAA', spOptions);
Working example
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
@Arial, thank you for the anwser, but it is not working. If I try000-0000ok works, but if I try0000-0000it's give me000-0000adding the-. Try yourself.
– Felipe Oriani
Nov 15 '18 at 13:32
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320097%2fjquery-mask-with-optional-char%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Just change the mask on the fly and allow an optional char to the end:
var spOptions = {
onKeyPress: function(val, e, field, options) {
var mask = "";
if (val.length === 8) {
mask = 'AAA-AAAAZ'
} else {
mask = 'AAAA-AAAA'
}
$('#car1').mask(mask, options);
},
translation: {
'Z': {
pattern: /[.]?/,
optional: true
}
}
};
$('#car1').mask('AAA-AAAA', spOptions);
Working example
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
@Arial, thank you for the anwser, but it is not working. If I try000-0000ok works, but if I try0000-0000it's give me000-0000adding the-. Try yourself.
– Felipe Oriani
Nov 15 '18 at 13:32
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
add a comment |
Just change the mask on the fly and allow an optional char to the end:
var spOptions = {
onKeyPress: function(val, e, field, options) {
var mask = "";
if (val.length === 8) {
mask = 'AAA-AAAAZ'
} else {
mask = 'AAAA-AAAA'
}
$('#car1').mask(mask, options);
},
translation: {
'Z': {
pattern: /[.]?/,
optional: true
}
}
};
$('#car1').mask('AAA-AAAA', spOptions);
Working example
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
@Arial, thank you for the anwser, but it is not working. If I try000-0000ok works, but if I try0000-0000it's give me000-0000adding the-. Try yourself.
– Felipe Oriani
Nov 15 '18 at 13:32
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
add a comment |
Just change the mask on the fly and allow an optional char to the end:
var spOptions = {
onKeyPress: function(val, e, field, options) {
var mask = "";
if (val.length === 8) {
mask = 'AAA-AAAAZ'
} else {
mask = 'AAAA-AAAA'
}
$('#car1').mask(mask, options);
},
translation: {
'Z': {
pattern: /[.]?/,
optional: true
}
}
};
$('#car1').mask('AAA-AAAA', spOptions);
Working example
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
Just change the mask on the fly and allow an optional char to the end:
var spOptions = {
onKeyPress: function(val, e, field, options) {
var mask = "";
if (val.length === 8) {
mask = 'AAA-AAAAZ'
} else {
mask = 'AAAA-AAAA'
}
$('#car1').mask(mask, options);
},
translation: {
'Z': {
pattern: /[.]?/,
optional: true
}
}
};
$('#car1').mask('AAA-AAAA', spOptions);
Working example
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
edited Nov 15 '18 at 14:09
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
answered Nov 15 '18 at 13:14
Ariel AlvaradoAriel Alvarado
682311
682311
@Arial, thank you for the anwser, but it is not working. If I try000-0000ok works, but if I try0000-0000it's give me000-0000adding the-. Try yourself.
– Felipe Oriani
Nov 15 '18 at 13:32
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
add a comment |
@Arial, thank you for the anwser, but it is not working. If I try000-0000ok works, but if I try0000-0000it's give me000-0000adding the-. Try yourself.
– Felipe Oriani
Nov 15 '18 at 13:32
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
@Arial, thank you for the anwser, but it is not working. If I try
000-0000 ok works, but if I try 0000-0000 it's give me 000-0000 adding the -. Try yourself.– Felipe Oriani
Nov 15 '18 at 13:32
@Arial, thank you for the anwser, but it is not working. If I try
000-0000 ok works, but if I try 0000-0000 it's give me 000-0000 adding the -. Try yourself.– Felipe Oriani
Nov 15 '18 at 13:32
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
@FelipeOriani i just fixed the answer
– Ariel Alvarado
Nov 15 '18 at 13:47
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
Thank you, very well done code!
– Felipe Oriani
Nov 15 '18 at 14:00
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53320097%2fjquery-mask-with-optional-char%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
