It is possible for html input type number to only display numbers in multiples of 5
HTML 5 only
<input type="number" name="pax" step="5">
There are other javascript or regex solutions out there, but they shouldn't be necessary.
Further reading of type input: http://www.w3schools.com/html/html_form_input_types.asp
Here's an example of using the more popular quantity entry attributes.
<input type="number" name="pax" min="0" max="100" step="5" value="0">
source to share
One way is to have a function onchange
that takes the element id of number as an argument and sets it to rounded to the nearest 5 of the current input.
function update(id){
var value = document.getElementById(id).value;
value = parseInt(math.round(value/5)*5);
}
It can be implemented as:
<input type="number" onchange="update(this.id)" id="number-thing" name="pax" step="5">
I am not aware of a direct way so that it only displays multiples, including the input entered. For numbers, there is an attribute step
(as shown above) that changes the number to the next highest or lowest multiple step.
This solution deals with the zoom in and out buttons, and five steps based on user input.
source to share
See my project to cross-browser filter the value of a text input element in your web page using JavaScript: Input Key Filter . You can filter the value as an integer, floating point, or write your own filter. The html input type number example shows only numbers that are a multiple of 5:
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Input Key Filter Test</title>
<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<!-- For compatibility of IE browser with audio element in the beep() function.
https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=9"/>
<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
</head>
<body>
To make html input type number only show numbers which are multiple of 5
<input id="MultipleOf5">
<script>
function TextAddMultipleOf5(elementInput){
inputKeyFilter.TextAdd(isRussian() ?
" , 5. : 5 10 15"
: "only allowed numbers which are multiple of 5. Examples: 5 10 15"
, elementInput);
}
function isMultipleOf5(input){
var integer = parseInt(input.value);
if(inputKeyFilter.isNaN(integer, input))
return false;//value is not integer
if(parseInt(integer/5)*5 != integer)
return false;//integer is not multiple of 5
return true;//integer is multiple of 5
}
inputKeyFilter.Create("MultipleOf5"
, function(event){//onChange event
inputKeyFilter.RemoveMyTooltip();
var elementNewMultipleOf5 = document.getElementById("NewMultipleOf5");
if(isMultipleOf5(this)){
elementNewMultipleOf5.innerHTML = this.value;
return;
}
elementNewMultipleOf5.innerHTML = "";
TextAddMultipleOf5(this);
}
, function(elementInput, value){//customFilter
//if(value.match(/^(-?\d*)$/) != null)//value is positive and negative number
if(value.match(/^(\d*)$/) != null)//value is positive number only
return true;//value is number
TextAddMultipleOf5(elementInput);
return false;//invalid value
}
//onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid)
, function(event){
var value;
if(isMultipleOf5(this))
value = this.value;
if(inputKeyFilter.isNaN(parseInt(value), this))
TextAddMultipleOf5(this);
}
);
</script>
New, multiple of 5 number: <span id="NewMultipleOf5"></span>
</body>
</html>
Also see my input key filter example page
source to share