Is there a way to stop manual input in a type=number but still allow changes with the "up/down" buttons?

Question

I have an input:

<input type="number" name="amount" min="4" max="6" step="2" value="4" id="amount" />

And I don't have a normal submit button to submit the info (uses javascript).

type=number works fine, but users can still type in any number they want, I would like to stop users from being able to type in the input, but still allow for changes using the "up/down" arrows that appear with type=number. I have tried researching but cannot find anything. Is this even possible?

this trick will work http://stackoverflow.com/questions/27740112/how-to-make-input-type-number-un-editable-but-still-functioning — superdb, Jan 05 '15 at 05:42
Does this answer your question? [HTML number input min and max not working properly](https://stackoverflow.com/questions/32936352/html-number-input-min-and-max-not-working-properly) — GSerg, Apr 06 '23 at 13:14

score 3 · Accepted Answer · answered Aug 17 '13 at 16:31

3

Is there any reason you are avoiding using a drop down select tag? This will give the user a very limited choice of numbers (set to your preference). You could even populate the <option> fields with numbers 1 through 100 (or whatever you choose) using PHP or JavaScript so you didn't have to manually type each number in the HTML code.

<select>
  <option value='1'>1</option>
  <option value='2'>2</option>
  <option value='3'>3</option>
</select>

answered Aug 17 '13 at 16:31

skovy

5,430
2
20
34

Hm, this is interesting, it is slightly more complicated than what I explained (there are settings that alter the input number) but I may be able to get it work with a select. Thank you! – user2413333 Aug 17 '13 at 16:33
Your advice is great, but, unfortunately, it does not answer the question as asked. Maybe the question should be edited. – randy Dec 20 '17 at 20:40

Alex W · Answer 2 · 2013-11-13T15:59:03.160

2

Edited to block copy/paste:

<script type="text/javascript">
document.getElementById('amount').onkeypress = function(e) { e.preventDefault(); };

document.getElementById('amount').onkeydown = function(e) {
    if(e.keyCode != 38 && e.keyCode != 40)
        e.preventDefault();
};

if(document.addEventListener)
    document.getElementById('amount').addEventListener('contextmenu',function(e) { e.preventDefault();
},false);
</script>

http://jsfiddle.net/Wh5Ms/2/

Then you could add a <noscript> tag for users with JavaScript turned off and show them a <select> element, etc.

edited Nov 13 '13 at 15:59

answered Aug 17 '13 at 16:32

Alex W

37,233
13
109
109

1

This did not prevent me from pasting a number in the field. – Jukka K. Korpela Aug 17 '13 at 16:34

score 1 · Answer 3 · answered Aug 17 '13 at 16:38

The user is expected to be able to type in the field, as one option. Although it is possible to prevent this in part (namely when JavaScript is enabled and event handlers in your code cover the ways that the user might use), there is no point in using the element when you specifically do not want to get its basic functionality.

If you only want to allow the two values 4 and 6, as it seems from your example, and you want to prevent the user from simply typing one of them, then you should use a select element or a set of two radio buttons.

score 0 · Answer 4 · answered Aug 17 '13 at 16:45

Although I am not sure as to what the step attribute does but pretty sure that you can find a way to use it as per your requirements in below code

The Code below makes sure that the allowed values are between min and max attribute specified only The Code is using jquery 1.10 onwards.

var prevVal = 0;
$("input[type=number]").on("keydown", function(e){
    prevVal = Number($(this).val());
});
$("input[type=number]").on("keyup", function(e){
   var minVal = $(this).attr("min");
    var maxVal = $(this).attr("max");
    var step= $(this).attr("step");
    var currentVal = $(this).val();
    if(!(currentVal<=maxVal&&currentVal>=minVal)){
        $(this).val(prevVal)
    }

});

score 0 · Answer 5 · answered May 04 '20 at 08:05

Try it dude, my problem was solved

var prevVal = 0;
$("input[type=number]").on("keydown", function(e){
    prevVal = Number($(this).val());
});
$("input[type=number]").on("keyup", function(e){
   var minVal = $(this).attr("min");
    var maxVal = $(this).attr("max");
    var step= $(this).attr("step");
    var currentVal = $(this).val();
    if(!(currentVal>=1)){
        $(this).val(1)
    }

});

Is there a way to stop manual input in a type=number but still allow changes with the "up/down" buttons?

5 Answers5

Linked

Related