This question already has answers here:
Allow 2 decimal places in <input type="number">
(18 answers)
Closed 3 years ago.
I want to show a popup on submit if the value is less than the max attribute. I am able to achieve that with the HTML5 attribute like this: <input type='number' max='21' />
but the problem is that when the max value is a float number like <input type='number' max='21.1' /> then it shows another popup saying that the value must be less than 21.
I've searched and I can solve that problem with Javascript but I want to use the max attribute even when the value is a float number.
<input type='number' max='21.1' />
<button type='submit'>Submit</button>
I want the form to be able to submit even if the value is 21 or 21.1 unless it is 21.2 or more.
You need to add the step property like this:
<form>
<input type="number" max="21.1" step="0.1"/>
</form>
Alternatively you can use any as value:
<form>
<input type="number" max="21.1" step="any"/>
</form>
Related
This question already has answers here:
Implement an input with a mask
(10 answers)
Closed 1 year ago.
I would like to make an input type mask __/__ only numbers can be inputted without using any plugin just pure jquery any tips?
Another Question: For example user would input 3,, the output display will be 3/9 the (/9) will just be there and not editable cause 9 would be the maximum number of pages is this possible to achieve?
As far as I understood, your question is how to do the following:
Mask input field
Input field can only accept number
So I do the following steps:
Make input field as password type.
Detect the key in character while typing(keypress is done before value change), then don't change the existing value when the character is not numeric.
I added a button that you can click it to show current value.
$('#in').keypress(function(event){
var reg = /[0-9]/g;
var key = String.fromCharCode(event.keyCode);
if(!reg.test(key))
return false;
})
$('#show').click(function(event){
alert($('#in').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="in" type="password"/>
<br />
<button id="show">Show Value</button>
Update
Below is an example done by this plugin.
This may meet your requirement.
$('#inputtext').securenumbermask({mask:'_',maxlength:15});
$('#show').click(function(event){
alert($('#inputtext-original').val());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/jQuery-Plugin-To-Mask-Numbers-In-Text-Field-Secure-Number-Mask/js/securenumbermask.js">
</script>
<input class="form-control" type="text" id="inputtext" value="123" input-original="inputtext-original">
<input id="inputtext-original" type="hidden" value="**">
<br />
<button id="show">Show Value</button>
This question already has answers here:
How to make HTML input tag only accept numerical values?
(33 answers)
Closed 4 years ago.
When you have:
<input type="number" id="myInput" />
and you fill in quite some rubbish like:
8,5,.,.,.,54.,543,.4
Then $('#myInput').value will return ''
This means that it is treated as if nothing was filled in by the user, messing up my form validation.
How can I retrieve the actual input?
A codePen can be found here, you can check the console that it indeed prints an empty string: https://codepen.io/anon/pen/EQrrXz?editors=1111
I am on chrome, but on safari this also happens.
I still want to be able to accept normal number inputs, including decimals.
You are putting string into type='number' which is not correct.
You get this error in console when you do it.
The specified value "8,5,.,.,.,54.,543,.4" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?
You can change type='text' instead or put pure number to type='number'
Example:
console.log(document.getElementById('myInput').value)
<input type="text" id="myInput" value="43.,.,,.,.5" />
This question already has answers here:
HTML text input allow only numeric input
(78 answers)
Closed 5 years ago.
I try like this :
<input type="number" pattern="[1-9]*" class="form-control" min="1">
I try input dot, it can
How can I disable dot(.) and another?
So, only 1-9
The same way you have min, you can add max=9:
<input type="number" class="form-control" min="1" max="9">
You will need to have some custom JavaScript validation (there are libraries for that) to interpret the min and max attributes for those browsers which do not support them natively.
You can also use the pattern attribute in html5:
<input type="text" name="name" pattern="[0-9]" title="Title" />
I'm new to AngularJS, just created a simple form in order to understand. I tried multiplying 2 input values, I'm good here, but when I use same code to sum those 2 input values it is getting concatenated instead of sum.
My code:
<div ng-app ng-init="fval = 1;sval = 2">
<div>
First Value:
</div>
<div>
<input type="text" ng-model="fval" />
</div>
<br />
<div>
Second Value:
</div>
<div>
<input type="text" ng-model="sval" />
</div>
<br />
<div>
<label id="lblResult">{{fval * sval}}</label>
</div>
Here I have given hardcoded values for my inputs, initially we will get result as 6. Also when we change the inputs we will get correct result for multiplying 2 values.
I changed my code for addtion as below:
<label id="lblResult">{{fval + sval}}</label>
After running the application I got the correct value as 3, but when I change my input values I'm getting concatenated values.
Like if I change my text box values, for firstTextBox = 12 & secondTextBox = 3, then I'm getting result value as '123'.
Hence, I'm landing with correct value when I run the application first time, but changing inputs on client side is concatenating.
Sorry for my English, since it is not my first language. Can anyone please help me where I'm going wrong.
Try Changing
<input type="text" ng-model="fval" />
To
<input type="number" ng-model="fval" />
That happens because the type of the ng-model is declared as text.
<input type="text" ng-model="fval" />
<input type="text" ng-model="sval" />
So when you add them using {{fval + sval}} you get a string since the sum of two string is the result of concationation of these two strings.
In order for them to work as expected you should replace them like below:
<input type="number" ng-model="fval" />
<input type="number" ng-model="sval" />
Hope this saves your time.
This is just a JavaScript thing. Your numbers are strings, and + is the concatenation operator. One way to solve this:
parseInt(fval) + parseInt(sval)
Edit: This is not allowed within Angular expressions (see below). Answer is valid for use in 'normal' JS code though.
This question already has answers here:
Multiple lines of input in <input type="text" />
(10 answers)
Closed 9 years ago.
I am trying to put some more data into value part of an input. but I want those strings to have line break.
<input type="text" value="text break text"/>
I want the value to be shown:
text
text
how can I do this? I am trying to add this with template engine of django, but django doesnot have it.
appreciate any help
I guess, you need to use <textarea /> instead of <input type="text" /> field. To break the lines, just use the normal line break like this:
<textarea>
Line 1
Line 2
</textarea>
You may find more about <textarea/> in HTML 4.01 specification.