We Keep Coding

HTML float number for Input min attribute

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! :)

how to allow input type number to accept alphabet

I want to enter full width number and turn it into half width using jquery but first I need it to accept characters that are not number.
<input id="text1" step="0.5" type="number" value="" name="text1">
I need type number because I want the step feature.

You can't make a type="number" field accept non-numeric characters. If you want to do that, you'll need to use type="text". (If you need the step feature, you'll have to implement it.)

If you want your text filed to accept floating numbers. Use following Input.
<input type="number" step="any" name="text1" value="">

enter 0 to 100 in text field using jquery regex

I need to enter 0.00 to 100.00 in text field using jquery regular expression. I am new for regex. Please help me how can I do this?
I do not allow to enter more than 100.00 or negative values.
var regex = "^\$(\d{1,3},?(\d{3},?)*\d{3}(\.\d{1,3})?|\d{1,3}(\.\d{2})?)$|^\d{1,2}(\.\d{1,2})? *%$|^100%$";
<input type="text" class="count">
How can I use this regex in textbox. I just want t allow only two numbers after decimal. Example (0.00 and 100.00 or 99.99) like this.

For modern browser is sugest the input type number
<form>
<input type="number" class="count" min="0.00" max="100" step="0.01">
<input type="submit"></form>

How to only allow the numbers 0-5 in <input> fields with AngularJS?

I have an input field like this:
HTML
<input ng-model="newtodo.effort" ng-enter="addTodo()" type="number" min="0" max="5"
maxlength="1" size="1" step="1" class="form-control marginBottom"
placeholder="Aufwand" aria-describedby="basic-addon2" required></input>
JavaScript/Angular controller
$scope.addTodo(todo) {
restservice.addTodo(todo); // Does call to REST service backend
}
In the input field above I only want to allow integer values 0, 1, 2, 3, 4 and 5.
Not allowed are floats (e.g. 1.4), characters (e.g. foo) and values less than 0 or bigger than 5.
The input field may not be empty!
As you can see I am already using HTML5 input attributes for this but I know that I cannot rely on those. Additionally I also check server-side if the values entered are valid against my restrictions. So far so good, but in order to increase usability and responsiveness of my web app I also want to validate these values in JavaScript using AngularJS. How would I do that? I know that I could implement complicated value checks in $scope.addTodo(todo) and then output error messages to the user if the values he/she entered weren't ok but I somehow "feel" that there is a better, easier "angularish" way using RegEx and a 1-liner? If so, please explain to me how to do this the Angular way. Thanks!

You can add the following attribute to your input field.
ng-pattern="/^[0-5]+$/"
And validate as such:
function formCtrl($scope) {
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app ng-controller="formCtrl">
<form name="myForm">
<input type="number" ng-model="newtodo.effort" name="effort" ng-pattern="/^[0-5]$/" ng-enter="addTodo()" step="1" class="form-control marginBottom" placeholder="Aufwand" aria-describedby="basic-addon2" required>
<span ng-show="myForm.effort.$error.pattern">The number must be between 0-5</span>
<span ng-show="myForm.effort.$error.number">No characters allowed</span>
<span ng-show="myForm.effort.$error.required && !myForm.effort.$error.number">The field is required</span>
</form>
</div>

You can use ngPattern to set the regular expression which you want to validate against.
Reffer to the docs for more details: https://docs.angularjs.org/api/ng/directive/input

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