How to make html numeric input wrap back around
-2
So my question is, if you have an HTML numeric input with max={100} and min={50} how can you make it so that if you hit the down arrow when it is set to 50, to wrap back around to 100. I tried doing this manually by manipulating the onChange handler method, but this messes with the ability to type in the input box, making it so that if I begin to type 100, the first key pressed (1) is below 50 and sets it to 50.
javascript html
asked Dec 27 '18 at 18:21
Young Scooter
797
add a comment |
-2
So my question is, if you have an HTML numeric input with max={100} and min={50} how can you make it so that if you hit the down arrow when it is set to 50, to wrap back around to 100. I tried doing this manually by manipulating the onChange handler method, but this messes with the ability to type in the input box, making it so that if I begin to type 100, the first key pressed (1) is below 50 and sets it to 50.
javascript html
asked Dec 27 '18 at 18:21
Young Scooter
797
4
Post your code, please.
– Antihype Bird
Dec 27 '18 at 18:26
Use the onkeyup handler and look for up arrow key and down arrow key and handle appropriately.
– John Sheridan
Dec 27 '18 at 18:42
thanks @JohnSheridan
– Young Scooter
Dec 27 '18 at 18:47
also can't post code. For client.
– Young Scooter
Dec 27 '18 at 18:47
If you need help with code you need to post it, or else we can't help, and nor does it qualify as a proper question w/o it. Furthermore, we don't need the client's code, we need a code that reproduce the issue.
– LGSon
Dec 27 '18 at 20:17
add a comment |
-2
-2
-2
So my question is, if you have an HTML numeric input with max={100} and min={50} how can you make it so that if you hit the down arrow when it is set to 50, to wrap back around to 100. I tried doing this manually by manipulating the onChange handler method, but this messes with the ability to type in the input box, making it so that if I begin to type 100, the first key pressed (1) is below 50 and sets it to 50.
javascript html
asked Dec 27 '18 at 18:21
Young Scooter
797
So my question is, if you have an HTML numeric input with max={100} and min={50} how can you make it so that if you hit the down arrow when it is set to 50, to wrap back around to 100. I tried doing this manually by manipulating the onChange handler method, but this messes with the ability to type in the input box, making it so that if I begin to type 100, the first key pressed (1) is below 50 and sets it to 50.
javascript html
javascript html
asked Dec 27 '18 at 18:21
Young Scooter
797
asked Dec 27 '18 at 18:21
Young Scooter
797
asked Dec 27 '18 at 18:21
Young Scooter
797
asked Dec 27 '18 at 18:21
Young Scooter
797
asked Dec 27 '18 at 18:21
Young Scooter
797
797
4
Post your code, please.
– Antihype Bird
Dec 27 '18 at 18:26
Use the onkeyup handler and look for up arrow key and down arrow key and handle appropriately.
– John Sheridan
Dec 27 '18 at 18:42
thanks @JohnSheridan
– Young Scooter
Dec 27 '18 at 18:47
also can't post code. For client.
– Young Scooter
Dec 27 '18 at 18:47
If you need help with code you need to post it, or else we can't help, and nor does it qualify as a proper question w/o it. Furthermore, we don't need the client's code, we need a code that reproduce the issue.
– LGSon
Dec 27 '18 at 20:17
add a comment |
4
Post your code, please.
– Antihype Bird
Dec 27 '18 at 18:26
Use the onkeyup handler and look for up arrow key and down arrow key and handle appropriately.
– John Sheridan
Dec 27 '18 at 18:42
thanks @JohnSheridan
– Young Scooter
Dec 27 '18 at 18:47
also can't post code. For client.
– Young Scooter
Dec 27 '18 at 18:47
If you need help with code you need to post it, or else we can't help, and nor does it qualify as a proper question w/o it. Furthermore, we don't need the client's code, we need a code that reproduce the issue.
– LGSon
Dec 27 '18 at 20:17
4
4
Post your code, please.
– Antihype Bird
Dec 27 '18 at 18:26
Post your code, please.
– Antihype Bird
Dec 27 '18 at 18:26
Use the onkeyup handler and look for up arrow key and down arrow key and handle appropriately.
– John Sheridan
Dec 27 '18 at 18:42
Use the onkeyup handler and look for up arrow key and down arrow key and handle appropriately.
– John Sheridan
Dec 27 '18 at 18:42
thanks @JohnSheridan
– Young Scooter
Dec 27 '18 at 18:47
thanks @JohnSheridan
– Young Scooter
Dec 27 '18 at 18:47
also can't post code. For client.
– Young Scooter
Dec 27 '18 at 18:47
also can't post code. For client.
– Young Scooter
Dec 27 '18 at 18:47
If you need help with code you need to post it, or else we can't help, and nor does it qualify as a proper question w/o it. Furthermore, we don't need the client's code, we need a code that reproduce the issue.
– LGSon
Dec 27 '18 at 20:17
If you need help with code you need to post it, or else we can't help, and nor does it qualify as a proper question w/o it. Furthermore, we don't need the client's code, we need a code that reproduce the issue.
– LGSon
Dec 27 '18 at 20:17
add a comment |
3 Answers
3
active
oldest
votes
2
Something like this:
const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>answered Dec 27 '18 at 20:28
Jakob E
1,244179
add a comment |
1
change handler triggers every time the input value changes. You need to use keyup handler as John mentioned in the comment.
$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
1
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
|
show 3 more comments
0
You can use closures to keep track of the value in the input and then check the updated values against the elements own min and max attributes. Something like below:
function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">answered Dec 27 '18 at 18:58
Tom O.
2,15411325
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
});
}
});
draft saved
draft discarded
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%2f53949252%2fhow-to-make-html-numeric-input-wrap-back-around%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
Something like this:
const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>answered Dec 27 '18 at 20:28
Jakob E
1,244179
add a comment |
2
Something like this:
const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>answered Dec 27 '18 at 20:28
Jakob E
1,244179
add a comment |
2
2
2
Something like this:
const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>answered Dec 27 '18 at 20:28
Jakob E
1,244179
Something like this:
const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>const input = document.querySelector('input');
input.addEventListener('keydown', e => {
const min = parseInt(input.min);
const max = parseInt(input.max);
if(e.keyCode === 38 || e.code === 'ArrowUp') {
e.preventDefault();
input.value++;
if(input.value > max) input.value = min;
}
if(e.keyCode === 40 || e.code === 'ArrowDown') {
e.preventDefault();
input.value--;
if(input.value < min) input.value = max;
}
})/* hide spin button */
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
display: none;
}
input[type=number] {
font-size: 3em;
}<input type="number" min="50" max="100" value="50" autofocus/>answered Dec 27 '18 at 20:28
Jakob E
1,244179
answered Dec 27 '18 at 20:28
Jakob E
1,244179
answered Dec 27 '18 at 20:28
Jakob E
1,244179
answered Dec 27 '18 at 20:28
Jakob E
1,244179
1,244179
add a comment |
add a comment |
1
change handler triggers every time the input value changes. You need to use keyup handler as John mentioned in the comment.
$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
1
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
|
show 3 more comments
1
change handler triggers every time the input value changes. You need to use keyup handler as John mentioned in the comment.
$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
1
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
|
show 3 more comments
1
1
1
change handler triggers every time the input value changes. You need to use keyup handler as John mentioned in the comment.
$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
change handler triggers every time the input value changes. You need to use keyup handler as John mentioned in the comment.
$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">$('#input').on('keyup', function(e) { // Trigger when a key is pressed and then released
if (e.which === 38) { // Check if the pressed key is Up Arrow
var val = $('#input').val();
if (!isNaN(val)) { // Check if the value is a valid number
val++;
if (val > 100) val = 50; // If it exceeds 100, go back to 50
if (val < 50) val = 100; // Vice versa
$('#input').val(val);
}
else $('#input').val(50); // If the value is not a number, set it to 50
}
if (e.which === 40) { // Check if the pressed key is Down Arrow
var val = $('#input').val();
if (!isNaN(val)) {
val--;
if (val > 100) val = 50;
if (val < 50) val = 100;
$('#input').val(val);
}
else $('#input').val(50);
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='text' id='input' value="50">answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
edited Dec 28 '18 at 11:24
answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
answered Dec 27 '18 at 18:58
Nayeemul Islam Swad
816
816
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
New contributor
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
Nayeemul Islam Swad is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
1
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
|
show 3 more comments
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
1
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
confused what's suppose to be happening here. Don't onChange and keyup both trigger when a single number is typed?
– Young Scooter
Dec 27 '18 at 19:47
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
Oh, I think I get it. I should check if up arrow is hit while the value === 100, and then set input to 50
– Young Scooter
Dec 27 '18 at 19:49
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
You're right. I've added some comments in the code to explain what each line does. Also if this answer solves the problem you're facing correctly, can you kindly mark it as accepted? That would give me a few reputations which I need to comment on posts.
– Nayeemul Islam Swad
Dec 27 '18 at 20:08
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
your code doesn't run though. But I think I get it.
– Young Scooter
Dec 28 '18 at 4:22
1
1
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
Ahh..Okay I misunderstood your requirements. Anyways thanks for letting me know what was wrong with this answer. Cheers! :)
– Nayeemul Islam Swad
Dec 28 '18 at 15:58
|
show 3 more comments
0
You can use closures to keep track of the value in the input and then check the updated values against the elements own min and max attributes. Something like below:
function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">answered Dec 27 '18 at 18:58
Tom O.
2,15411325
add a comment |
0
You can use closures to keep track of the value in the input and then check the updated values against the elements own min and max attributes. Something like below:
function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">answered Dec 27 '18 at 18:58
Tom O.
2,15411325
add a comment |
0
0
0
You can use closures to keep track of the value in the input and then check the updated values against the elements own min and max attributes. Something like below:
function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">answered Dec 27 '18 at 18:58
Tom O.
2,15411325
You can use closures to keep track of the value in the input and then check the updated values against the elements own min and max attributes. Something like below:
function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">function ticker(initVal, el, max, min) {
var currentValue = initVal;
return function(n) {
if (currentValue == n) {
if (n == max) {
el.value = min;
} else if (n == min) {
el.value = max;
}
}
currentValue = n;
}
}
var target = document.querySelector('#myNumber');
var updateEl = ticker(target.value, target, target.max, target.min);
document.querySelector('#myNumber').addEventListener('click', (e) => updateEl(e.target.value));<input type="number" id="myNumber" value="1" max="5" min="1">answered Dec 27 '18 at 18:58
Tom O.
2,15411325
answered Dec 27 '18 at 18:58
Tom O.
2,15411325
answered Dec 27 '18 at 18:58
Tom O.
2,15411325
answered Dec 27 '18 at 18:58
Tom O.
2,15411325
2,15411325
add a comment |
add a comment |
draft saved
draft discarded
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.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- 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.
draft saved
draft discarded
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%2f53949252%2fhow-to-make-html-numeric-input-wrap-back-around%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
4
Post your code, please.
– Antihype Bird
Dec 27 '18 at 18:26
Use the onkeyup handler and look for up arrow key and down arrow key and handle appropriately.
– John Sheridan
Dec 27 '18 at 18:42
thanks @JohnSheridan
– Young Scooter
Dec 27 '18 at 18:47
also can't post code. For client.
– Young Scooter
Dec 27 '18 at 18:47
If you need help with code you need to post it, or else we can't help, and nor does it qualify as a proper question w/o it. Furthermore, we don't need the client's code, we need a code that reproduce the issue.
– LGSon
Dec 27 '18 at 20:17