HTML float number for Input min attribute - javascript

I have this short example
<input value="2" min="0.1" max="1000" type="number" />
The input with: min=0.1 max=1000 value=2 step=1
The problem is: If I click on up arrow (pseudo-element for number type=number) - the input value becames 2.1 and then 3.1
WHY does it add 0.1 on the first click? And if you change 3.1 to 3 and click up arrow you still see 3.1 and 4.1 on the second click

Adding step attribute solves the problem
<input value="2" min="0.1" max="1000" step="0.1" type="number" />

You can use js like below.
$(this).off('input').on('input',function(e){
var value = $(this).val();
var regExp = /^\d{0,10}(\.\d{0,1})?$/;
if(!regExp.test(this.value)){
$(this).val(value.substring(0,value.length-1));
}
});
You can also control length of input or max/min for float. Don't forget to change this to your input tag name. Good luck! :)

Related

how to ignore validation of type of range input

hello I have one input range slider in my form.
<input class="form-control" type="range" min="0" max="100" step="1" name="ageRange" id="ageRange" value="0" >
I validate form with jquery.validate.min.js. though I have no any jquery validate rules for ageRange input
it is validated . when moving slide bar and select then I got this message "Please enter a value less than or equal to 100"
It's validated because of the max & min attributes you've given here.
So, if you want to ignore the validation in this particular field, you can remove the min and max attributes.

Input type=[number] converts float to int on display

I want to display a value of lets say 100.00 in a number input. This can be user entered and works with currency so it is important that it shows.
However when programatically setting the value to 100.00 it resets the displayed variable to 100.
However if you write 100.00 then it works fine. Problem is that there is validation on this input and the value gets refreshed by the javascript putting it back to 100.
Edit: Seems to only be affecting Firefox.
I have tried adding the value as
input.value = 100.00
input.value = parseFloat(100.00)
input.value = parseFloat(100.00).toFixed(2).
document.getElementById('test_input').value = 100.00;
<input id="test_input" type="number" step="0.01">
And JSFiddle
https://jsfiddle.net/3qnL07yu/
You can update the input value like this:
document.getElementById('test_input').value = "100.00";
Here is the updated code:
https://jsfiddle.net/zun0aptf/4/
Possible Ways: you could set your values like this
<input id="test_input" type="number" step="0.01" value="100.00">
Or
document.getElementById('test_input').value = "100.00";
Change type="number" to type="text" and put validation for number.
<input id="test_input" type="text" step="0.01">
Updated code : https://jsfiddle.net/8c6n012f/1/

Validate 0.5 as Step Value in HTML5 Number Input

I want to have an input field which only allows to type whole numbers or .5 decimal numbers. e.g. 0, 0.5, 1, 1.5, 2, 2.5.......etc etc
I am trying to do this with a HTML5 input field as so
<input type="number" min="0" max="18" step="0.5" pattern="\d+" />
but it won't validate the number when it is on a half step of 0.5. It just stays red when clicking outside / validating.
Is this possible? I can't find similar example of how to validate for half steps. DO I need to use jQuery to achieve this?
Thanks
Fiddle Demo http://jsfiddle.net/b8NrE/906/
Remove the pattern attribute. This is used for complex validation that requires regular expressions (and your regular expression is only matching sequences of digits). As it is, stipulating min, max, and step already define all the validation that you need:
<input type="number" min="0" max="18" step="0.5" />
http://jsfiddle.net/b8NrE/907/
You can try this: It will clear text box if step is not .5
<input type="number" min="0" oninput="validity.valid||(value='');" step="0.5" />

trigger number pad on focus in html input element

I'm working on a web application for tablets. In the application there is an input element that requires an integer input. When the user clicks on the input element usually the letter keyboard pops up and then the user has to switch to the number pad. Is there an attribute that one can specify so that the tablet pops up a number pad instead?
Did you try number type:
<input type="number" name="quantity" min="0" max="1000" step="1">
One of these types:
<input type="tel" ...>
<input type="number" ...>
The actual behaviour will depend on the tablet's platform. On iOS, the number keyboard has integers and arithmetic operators, and the tel keyboard has large digits and a #/* key only.
Source
You can try <input type="number" />.
And if you want to remove arrows you can check : this answer

Javascript newbie issue, converting a number to any word

So frustrated with my issue, totally over my head trying to add a small feature to my site. I don't really know what I'm doing and I'm trying to use the HTML input range, with a text box that labels the value of the slider.
So I have this so far...
<input id="Slider" type="range" min="0" max="2" value="2" />
<p class="note">Current value: <span id="currentValue">0</span></p>
<script>
$(function(){
var currentValue = $('#currentValue');
$('#Slider').change(function(){
currentValue.html(this.value);
});
$('#Slider').change();
});
</script>
It works fine, sometimes it doesn't always update the number, but outputs the numbers 0, 1, and 2.
I need to know how to convert 0 to a word, like... apple, 1 to orange, and 2 to banana, or whatever I wish the words to be.
Thank you for any help you can provide. Also, if there is a better / more efficient way to accomplish this that would be nice as well, thank you.
You would use an array to and .html() to change the text (how #Ian commented).
An improved version of the slider with the word changing:
HTML
<p id="word">Number 0 has been chosen</p>
<input type="range" id="Slider" type="range" min="0" max="2" value="0">
JS/JQuery
var n = ["Number 0 has been chosen", "Number 1 has been chosen", "Number 2 has been chosen"];
$('#Slider').on('change', function(){
$('#word').html(n[this.value]);
});
JSFiddle

Categories