Auto populate dashes after a several length of string problem
Previously I have done a useful function for user to auto populate dashes after a length of string.
To understand my scenario :
- I have a text box for user to key in Mobile No.
- To make the value inserted is the same format, I code a script to auto insert a dash a length of char.
- The problem is, whenever I want to erase the inserted value, the script wont allow me as it auto populate the dash after a length of
string unless I press the "backspace" longer then only I can erase
the inserted value.
Here is my script for the auto inserted dash :
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(){
if ($(this).val().length == 5){
$(this).val($(this).val() + "-"); }
}); });
and here is the image of the text box
Mobile No. Text Box
Please help, Thank You.
Regards
javascript html
asked Nov 14 '18 at 3:20
lianaliana
31
add a comment |
Previously I have done a useful function for user to auto populate dashes after a length of string.
To understand my scenario :
- I have a text box for user to key in Mobile No.
- To make the value inserted is the same format, I code a script to auto insert a dash a length of char.
- The problem is, whenever I want to erase the inserted value, the script wont allow me as it auto populate the dash after a length of
string unless I press the "backspace" longer then only I can erase
the inserted value.
Here is my script for the auto inserted dash :
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(){
if ($(this).val().length == 5){
$(this).val($(this).val() + "-"); }
}); });
and here is the image of the text box
Mobile No. Text Box
Please help, Thank You.
Regards
javascript html
asked Nov 14 '18 at 3:20
lianaliana
31
you must've forgotten that when you press the "backspace" button, you are calling the key up event... if it's not an overkill to your solution, I suggest you use a library for that, or might as well handle keying "backspace" events
– arjayosma
Nov 14 '18 at 3:37
yes, that is why I cant find the solution on how to stop calling the function when user tried to press backspace to erase the value.. anyway I found the solution.. thank you for your response. Really appreciated it.
– liana
Nov 14 '18 at 6:55
add a comment |
Previously I have done a useful function for user to auto populate dashes after a length of string.
To understand my scenario :
- I have a text box for user to key in Mobile No.
- To make the value inserted is the same format, I code a script to auto insert a dash a length of char.
- The problem is, whenever I want to erase the inserted value, the script wont allow me as it auto populate the dash after a length of
string unless I press the "backspace" longer then only I can erase
the inserted value.
Here is my script for the auto inserted dash :
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(){
if ($(this).val().length == 5){
$(this).val($(this).val() + "-"); }
}); });
and here is the image of the text box
Mobile No. Text Box
Please help, Thank You.
Regards
javascript html
asked Nov 14 '18 at 3:20
lianaliana
31
Previously I have done a useful function for user to auto populate dashes after a length of string.
To understand my scenario :
- I have a text box for user to key in Mobile No.
- To make the value inserted is the same format, I code a script to auto insert a dash a length of char.
- The problem is, whenever I want to erase the inserted value, the script wont allow me as it auto populate the dash after a length of
string unless I press the "backspace" longer then only I can erase
the inserted value.
Here is my script for the auto inserted dash :
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(){
if ($(this).val().length == 5){
$(this).val($(this).val() + "-"); }
}); });
and here is the image of the text box
Mobile No. Text Box
Please help, Thank You.
Regards
javascript html
javascript html
asked Nov 14 '18 at 3:20
lianaliana
31
asked Nov 14 '18 at 3:20
lianaliana
31
asked Nov 14 '18 at 3:20
lianaliana
31
asked Nov 14 '18 at 3:20
lianaliana
31
asked Nov 14 '18 at 3:20
lianaliana
31
31
you must've forgotten that when you press the "backspace" button, you are calling the key up event... if it's not an overkill to your solution, I suggest you use a library for that, or might as well handle keying "backspace" events
– arjayosma
Nov 14 '18 at 3:37
yes, that is why I cant find the solution on how to stop calling the function when user tried to press backspace to erase the value.. anyway I found the solution.. thank you for your response. Really appreciated it.
– liana
Nov 14 '18 at 6:55
add a comment |
you must've forgotten that when you press the "backspace" button, you are calling the key up event... if it's not an overkill to your solution, I suggest you use a library for that, or might as well handle keying "backspace" events
– arjayosma
Nov 14 '18 at 3:37
yes, that is why I cant find the solution on how to stop calling the function when user tried to press backspace to erase the value.. anyway I found the solution.. thank you for your response. Really appreciated it.
– liana
Nov 14 '18 at 6:55
you must've forgotten that when you press the "backspace" button, you are calling the key up event... if it's not an overkill to your solution, I suggest you use a library for that, or might as well handle keying "backspace" events
– arjayosma
Nov 14 '18 at 3:37
you must've forgotten that when you press the "backspace" button, you are calling the key up event... if it's not an overkill to your solution, I suggest you use a library for that, or might as well handle keying "backspace" events
– arjayosma
Nov 14 '18 at 3:37
yes, that is why I cant find the solution on how to stop calling the function when user tried to press backspace to erase the value.. anyway I found the solution.. thank you for your response. Really appreciated it.
– liana
Nov 14 '18 at 6:55
yes, that is why I cant find the solution on how to stop calling the function when user tried to press backspace to erase the value.. anyway I found the solution.. thank you for your response. Really appreciated it.
– liana
Nov 14 '18 at 6:55
add a comment |
2 Answers
2
active
oldest
votes
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
add a comment |
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
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%2f53292718%2fauto-populate-dashes-after-a-several-length-of-string-problem%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
add a comment |
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
add a comment |
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
Try adding a Validation to avoid adding the "-" when user presses the backspace
$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">$(document).ready(function() {
$("input[name$='Mobile No. Text Box']").keyup(function(e){
if ($(this).val().length == 5 && e.which != 8){
$(this).val($(this).val() + "-"); }
}); });<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name="Mobile No. Text Box">answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
answered Nov 14 '18 at 3:34
Gabriel LopezGabriel Lopez
2676
2676
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
add a comment |
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
It works! thank you so much! but may I know, why does we use -> e.which != 8
– liana
Nov 14 '18 at 6:52
add a comment |
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
add a comment |
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
add a comment |
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
There are plenty libraries out there which can help you with this problem. I personally recommend this one https://github.com/text-mask
You can read through plain vanilla JavaScript usage right here https://github.com/text-mask/text-mask/tree/master/vanilla#readme
I believe its first example is a basic phone-number input which is exactly what you are looking for.
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
answered Nov 14 '18 at 3:34
anvkanvk
1,028810
1,028810
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
add a comment |
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
hi thanks for your response! Really appreciated it.
– liana
Nov 14 '18 at 6:53
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%2f53292718%2fauto-populate-dashes-after-a-several-length-of-string-problem%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
you must've forgotten that when you press the "backspace" button, you are calling the key up event... if it's not an overkill to your solution, I suggest you use a library for that, or might as well handle keying "backspace" events
– arjayosma
Nov 14 '18 at 3:37
yes, that is why I cant find the solution on how to stop calling the function when user tried to press backspace to erase the value.. anyway I found the solution.. thank you for your response. Really appreciated it.
– liana
Nov 14 '18 at 6:55