The reason is that the input value for number keys in num pad is different from those under the function keys.
The values for keys in Number row: 48 ~ 57
The values for keys in Number Pad: 96 ~ 105
That's the reason why I use these "magic" numbers on the sides of the comparison operators.
To make the codes more readable, I modified the previous codes for your reference.
<div>
<div class="container body-content">
<h3>Please enter the 6-digit verification code we sent via SMS:</h3>
<div>
<div id="SMSArea" class="row SMSArea">
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
</div>
<div class="row ">
<button id="verifyBtn" class="btn btn-primary btn-embossed" >Verify</button>
<label id="LabelSMCCodes"></label>
<input id="hf_sms" type="hidden" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var smsCodes = $('.smsCode');
function goToNextInput(e) {
var key = e.which,
t = $(e.target),
// Get the next input
sib = t.closest('div').next().find('.smsCode');
// Not allow any keys to work except for tab and number
if ( !IsTab(key) && !IsNum(key)) {
console.log("!=9");
e.preventDefault();
return false;
}
// Tab
if (IsTab(key)) {
console.log("===9");
return true;
}
// Go back to the first one
if (!sib || !sib.length) {
console.log("!sib || !sib.length");
sib = $('.smsCode').eq(0);
console.log(sib);
}
sib.select().focus();
}
function onKeyDown(e) {
var key = e.which;
// only allow tab and number
if (IsTab(key) || IsNum(key)) {
return true;
}
e.preventDefault();
return false;
}
function onFocus(e) {
$(e.target).select();
}
function IsTab(key) {
return key === 9;
} function IsNum(key) {
// Number range 48~57 means values for the number key row, Number range 97~105
return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
}
smsCodes.on('keyup', goToNextInput);
smsCodes.on('keydown', onKeyDown);
smsCodes.on('click', onFocus);
})
</script>
<script>
$(function () {
$("#verifyBtn").on('click', function (e) {
console.log('btnclick');
combineSMSCodes();
e.preventDefault();
});
})
function combineSMSCodes() {
var sms = "";
$('.smsCode').each(function(i,element){
sms += $(element).val();
})
// use label to display
$("#LabelSMCCodes").text("The SMS Codes are: " + sms);
// use hidden field to store the sms codes
$("#hf_sms").val(sms);
}
</script>
Hope this can help you.
Best regards,
Sean
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
The reason is that the input value for number keys in num pad is different from those under the function keys.
The values for keys in Number row: 48 ~ 57
The values for keys in Number Pad: 96 ~ 105
That's the reason why I use these "magic" numbers on the sides of the comparison operators.
To make the codes more readable, I modified the previous codes for your reference.
<div>
<div class="container body-content">
<h3>Please enter the 6-digit verification code we sent via SMS:</h3>
<div>
<div id="SMSArea" class="row SMSArea">
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
<div class="col-2">
<input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" />
</div>
</div>
<div class="row ">
<button id="verifyBtn" class="btn btn-primary btn-embossed" >Verify</button>
<label id="LabelSMCCodes"></label>
<input id="hf_sms" type="hidden" />
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
var smsCodes = $('.smsCode');
function goToNextInput(e) {
var key = e.which,
t = $(e.target),
// Get the next input
sib = t.closest('div').next().find('.smsCode');
// Not allow any keys to work except for tab and number
if ( !IsTab(key) && !IsNum(key)) {
console.log("!=9");
e.preventDefault();
return false;
}
// Tab
if (IsTab(key)) {
console.log("===9");
return true;
}
// Go back to the first one
if (!sib || !sib.length) {
console.log("!sib || !sib.length");
sib = $('.smsCode').eq(0);
console.log(sib);
}
sib.select().focus();
}
function onKeyDown(e) {
var key = e.which;
// only allow tab and number
if (IsTab(key) || IsNum(key)) {
return true;
}
e.preventDefault();
return false;
}
function onFocus(e) {
$(e.target).select();
}
function IsTab(key) {
return key === 9;
}
function IsNum(key) {
// Number range 48~57 means values for the number key row, Number range 97~105
return (key >= 48 && key <= 57) || (key >= 96 && key <= 105);
}
smsCodes.on('keyup', goToNextInput);
smsCodes.on('keydown', onKeyDown);
smsCodes.on('click', onFocus);
})
</script>
<script>
$(function () {
$("#verifyBtn").on('click', function (e) {
console.log('btnclick');
combineSMSCodes();
e.preventDefault();
});
})
function combineSMSCodes() {
var sms = "";
$('.smsCode').each(function(i,element){
sms += $(element).val();
})
// use label to display
$("#LabelSMCCodes").text("The SMS Codes are: " + sms);
// use hidden field to store the sms codes
$("#hf_sms").val(sms);
}
</script>
Hope this can help you.
Best regards,
Sean
when the textbox is empty, how to jump previous textbox after pressing backspace button. (press backspace to remove numeric in current textbox and auto go to previous textbox for 6 sms input textbox.
Regarding the backspace key, it is another topic since you cannot simply change the value but need to add new codes to find the previous input textbox.
We suggest that you could post a new thread for the new topic/problem so that we could focus on solving one problem at the same time.
ASP.NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today. Learn more >
Member
1 Points
102 Posts
how to jump to next/previous field when input numeric in num pad
Sep 24, 2020 10:15 AM|20141113|LINK
$(function () {
var smsCodes = $('.digitFormat');
function goToNextInput(e) {
var key = e.which,
t = $(e.target),
sib = t.closest('span').next().find('.digitFormat');
if (key != 96 && key != 46 && key != 9 && key != 8 && (key < 48 || key > 57) && (key < 96 || key > 105) ) {
e.preventDefault();
return false;
}
if (key == 46 || key == 9 || key == 8 || (key >= 96 && key <=105)) {
return true;
}
if (!sib || !sib.length) {
console.log("!sib || !sib.length");
sib = $('.smsCode').eq(0);
console.log(sib);
}
sib.select().focus();
}
function onKeyDown(e) {
var key = e.which;
if (key == 46 || key == 9 || key == 8 || key==96 || (key >= 48 && key <= 57) || (key >= 96 && key <= 105 )) {
return true;
}
e.preventDefault();
return false;
}
function onFocus(e) {
$(e.target).select();
}
smsCodes.on('keyup', goToNextInput);
smsCodes.on('keydown', onKeyDown);
smsCodes.on('click', onFocus);
})
i don't know why it can't jump to next input filed when I input numeric in num pad from above javascript.
Contributor
3020 Points
891 Posts
Re: how to jump to next/previous field when input numeric in num pad
Sep 25, 2020 06:40 AM|Sean Fang|LINK
Hi 20141113,
Sorry that the last reply confuses you.
The reason is that the input value for number keys in num pad is different from those under the function keys.
The values for keys in Number row: 48 ~ 57
The values for keys in Number Pad: 96 ~ 105
That's the reason why I use these "magic" numbers on the sides of the comparison operators.
To make the codes more readable, I modified the previous codes for your reference.
<div> <div class="container body-content"> <h3>Please enter the 6-digit verification code we sent via SMS:</h3> <div> <div id="SMSArea" class="row SMSArea"> <div class="col-2"> <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" /> </div> <div class="col-2"> <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" /> </div> <div class="col-2"> <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" /> </div> <div class="col-2"> <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" /> </div> <div class="col-2"> <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" /> </div> <div class="col-2"> <input type="text" maxlength="1" size="1" min="0" max="9" pattern="[0-9]{1}" class="smsCode text-center rounded-lg" /> </div> </div> <div class="row "> <button id="verifyBtn" class="btn btn-primary btn-embossed" >Verify</button> <label id="LabelSMCCodes"></label> <input id="hf_sms" type="hidden" /> </div> </div> </div> </div> <script type="text/javascript"> $(function () { var smsCodes = $('.smsCode'); function goToNextInput(e) { var key = e.which, t = $(e.target), // Get the next input sib = t.closest('div').next().find('.smsCode'); // Not allow any keys to work except for tab and number if ( !IsTab(key) && !IsNum(key)) { console.log("!=9"); e.preventDefault(); return false; } // Tab if (IsTab(key)) { console.log("===9"); return true; } // Go back to the first one if (!sib || !sib.length) { console.log("!sib || !sib.length"); sib = $('.smsCode').eq(0); console.log(sib); } sib.select().focus(); } function onKeyDown(e) { var key = e.which; // only allow tab and number if (IsTab(key) || IsNum(key)) { return true; } e.preventDefault(); return false; } function onFocus(e) { $(e.target).select(); } function IsTab(key) { return key === 9; } function IsNum(key) { // Number range 48~57 means values for the number key row, Number range 97~105 return (key >= 48 && key <= 57) || (key >= 96 && key <= 105); } smsCodes.on('keyup', goToNextInput); smsCodes.on('keydown', onKeyDown); smsCodes.on('click', onFocus); }) </script> <script> $(function () { $("#verifyBtn").on('click', function (e) { console.log('btnclick'); combineSMSCodes(); e.preventDefault(); }); }) function combineSMSCodes() { var sms = ""; $('.smsCode').each(function(i,element){ sms += $(element).val(); }) // use label to display $("#LabelSMCCodes").text("The SMS Codes are: " + sms); // use hidden field to store the sms codes $("#hf_sms").val(sms); } </script>Hope this can help you.
Best regards,
Sean
Member
1 Points
102 Posts
Re: how to jump to next/previous field when input numeric in num pad
Sep 25, 2020 07:00 AM|20141113|LINK
when the textbox is empty, how to jump previous textbox after pressing backspace button. (press backspace to remove numeric in current textbox and auto go to previous textbox for 6 sms input textbox.
Contributor
3020 Points
891 Posts
Re: how to jump to next/previous field when input numeric in num pad
Sep 25, 2020 08:00 AM|Sean Fang|LINK
Hi 20141113,
Regarding the backspace key, it is another topic since you cannot simply change the value but need to add new codes to find the previous input textbox.
We suggest that you could post a new thread for the new topic/problem so that we could focus on solving one problem at the same time.
Moreover, since you already mentioned this question in previous thread, I have replied you there : https://forums.asp.net/t/2170688.aspx
Best regards,
Sean