I want the following Angular code (using Angular 12) to show "Illegal award number" when the input is invalid.
As you can see in the screenshot, when the number is -1 (smaller than the min value defined on the input), the div is shown as expected.
However, if I input some text such as 1-, or an expression 3-4 and hover my mouse over it, the browser will tell me my input is not a valid number, but the div is not shown (which means awardInputRef.invalid is false).
Why is that?
Here is the relevant code
<label class="form-label" for="awardInput">Award</label>
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" />
<div *ngIf="awardInputRef.invalid">Illegal award number</div>
PS:
If I add (blur)="onAwardBlur($event)" to the award input and add a function in my component
onAwardBlur(event) {
console.log(event);
}
then debug the code by logevent.target.validity.valid, I will see it is false.
The code is available on stackblitz. The Angular version there is 11, and the div does not show up even if I input -1 there.
As part of Angular version 12 only min and max directive are implemented that's why stackblitz version is not working.
You can workaround your issue using native Input element ValidityState
Define another one template variable on input element
<input class="form-control" id="awardInput" type="number" min="0" max="10" step="0.1" [(ngModel)]="award"
#awardInputRef="ngModel" #inputRef />
Then you can add some custom validity something like this:
<div *ngIf="awardInputRef.invalid
|| inputRef.validity.badInput && (awardInputRef.dirty || awardInputRef.touched)
">Illegal award number</div>
Working Example
input: -1
Your Using [ - ] this special character so the filed goes awardInputRef.invalid.
so div shown.
input: 1-
Your using number first it goes awardInputRef.valid or something else but not awardInputRef.invalid .
so the div not shown in this case.
you just inspect the field and find the before after changes .
Is there a way to force the number keyboard to come up on the phone for an <input type="text">? I just realized that <input type="number"> in HTML5 is for “floating-point numbers”, so it isn’t suitable for credit card numbers, ZIP codes, etc.
I want to emulate the numeric-keyboard functionality of <input type="number">, for inputs that take numeric values other than floating-point numbers. Is there, perhaps, another appropriate input type that does that?
You can do <input type="text" pattern="\d*">. This will cause the numeric keyboard to appear.
See here for more detail: Text, Web, and Editing Programming Guide for iOS
<form>
<input type="text" pattern="\d*">
<button type="submit">Submit</button>
</form>
As of mid-2015, I believe this is the best solution:
<input type="number" pattern="[0-9]*" inputmode="numeric">
This will give you the numeric keypad on both Android and iOS:
It also gives you the expected desktop behavior with the up/down arrow buttons and keyboard friendly up/down arrow key incrementing:
Try it in this code snippet:
<form>
<input type="number" pattern="[0-9]*" inputmode="numeric">
<button type="submit">Submit</button>
</form>
By combining both type="number" and pattern="[0-9]*, we get a solution that works everywhere. And, its forward compatible with the future HTML 5.1 proposed inputmode attribute.
Note: Using a pattern will trigger the browser's native form validation. You can disable this using the novalidate attribute, or you can customize the error message for a failed validation using the title attribute.
If you need to be able to enter leading zeros, commas, or letters - for example, international postal codes - check out this slight variant.
Credits and further reading:
http://www.smashingmagazine.com/2015/05/form-inputs-browser-support-issue/
http://danielfriesen.name/blog/2013/09/19/input-type-number-and-ios-numeric-keypad/
I have found that, at least for "passcode"-like fields, doing something like <input type="tel" /> ends up producing the most authentic number-oriented field and it also has the benefit of no autoformatting. For example, in a mobile application I developed for Hilton recently, I ended up going with this:
... and my client was very impressed.
<form>
<input type="tel" />
<button type="submit">Submit</button>
</form>
<input type="text" inputmode="numeric">
With Inputmode you can give a hint to the browser.
Using the type="email" or type="url" will give you a keyboard on some phones at least, such as iPhone. For phone numbers, you can use type="tel".
There is a danger with using the <input type="text" pattern="\d*"> to bring up the numeric keyboard. On firefox and chrome, the regular expression contained within the pattern causes the browser to validate the input to that expression. errors will occur if it doesn't match the pattern or is left blank. Be aware of unintended actions in other browsers.
as of 2020
<input type="number" pattern="[0-9]*" inputmode="numeric">
css tricks did a really good article on it: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/
For me the best solution was:
For integer numbers, which brings up the 0-9 pad on android and iphone
<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d]*" />
You also may want to do this to hide the spinners in firefox/chrome/safari, most clients think they look ugly
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield;
}
And add novalidate='novalidate' to your form element, if your doing custom validation
Ps just in case you actually wanted floating point numbers after all,step to whatever precision you fancy, will add '.' to android
<label for="ting">
<input id="ting" name="ting" type="number" pattern="[\d\.]*" step="0.01" />
I think type="number" is the best for semantic web page. If you just want to change the keyboard, you can use type="number" or type="tel". In both cases, iPhone doesn't restrict user input. User can still type in (or paste in) any characters he/she wants. The only change is the keyboard shown to the user. If you want any restriction beyond this, you need to use JavaScript.
There is an easy way to achieve this type of behaviour(like if we want to use text formatting in the input field but still want the numeric keyboard to be shown):
My Input:
<input inputMode="numeric" onChange={handleInputChange} />
Tip: if you want this type of behaviour(comma-separated numbers)
then follow handleInputChange implementation (this is react based so mentioned states also)
In 2018:
<input type="number" pattern="\d*">
is working for both Android and iOS.
I tested on Android (^4.2) and iOS (11.3)
<input type="text" inputmode="decimal">
it will give u text input using numeric key-pad
All of the posted answers trigger the number only keyboard, which is not what the OP was asking. The only way I've found to trigger the type='number' keyboard on a text input is to use CSS and JS.
The trick is to create a second number input, which you overlap on top of your text input using css.
<style type="text/css">
/* hide number spinners on inputs */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance:textfield; /* Firefox */
}
.hidden-number {
margin-top: -26px;
}
</style>
<form method="post" action="submit.php">
<input class="form-control" type="text" name="input_name">
<input class="form-control hidden-number" type="number" id="input_name">
</form>
Using JavaScript, when your number input gains focus it will trigger the keyboard that you want. You will then have to remove the type='number' attribute, which would prevent you from entering anything other than numbers. Then transfer whatever content is in your text input to the number input. Lastly, when the number input loses focus, transfer its contents back to the text input and replace its type='number' attribute.
<script type="text/javascript">
$(".hidden-number").on("focus", function(){
$(this).removeAttr("type");
var text_input = $("input[name="+this.id+"]");
$(this).val(text_input.val());
text_input.val("");
});
$(".hidden-number").on("focusout", function(){
var text_input = $("input[name="+this.id+"]");
text_input.val($(this).val());
$(this).attr("type", "number");
});
</script>
You can try like this:
<input type="number" name="input">
<input type="submit" value="Next" formnovalidate="formnovalidate">
But be careful: If your input contains something other than a number, it will not be transmitted to the server.
I couldn't find a type that worked best for me in all situations: I needed to default to numeric entry (entry of "7.5" for example) but also at certain times allow text ("pass" for example). Users wanted a numeric keypad (entry of 7.5 for example) but occasional text entry was required ("pass" for example).
Rather what I did was to add a checkbox to the form and allow the user to toggle my input (id="inputSresult") between type="number" and type="text".
<input type="number" id="result"... >
<label><input id="cbAllowTextResults" type="checkbox" ...>Allow entry of text results.</label>
Then I wired a click handler to the checkbox that toggles the type between text and number based on whether the checkbox above is checked:
$(document).ready(function () {
var cb = document.getElementById('cbAllowTextResults');
cb.onclick = function (event) {
if ($("#cbAllowTextResults").is(":checked"))
$("#result").attr("type", "text");
else
$("#result").attr("type", "number");
}
});
This worked out well for us.
try this:
$(document).ready(function() {
$(document).find('input[type=number]').attr('type', 'tel');
});
refer: https://answers.laserfiche.com/questions/88002/Use-number-field-input-type-with-Field-Mask
I saw this bootstrap popover and I'am trying to use it in my project.
Consider a simple example.
<input type="number" ng-model="data" step="0.1" />
The input field has steps of 0.1. I want the user to enter only values up to 10 and not beyond that.
If user enters anything beyond 10, I want a popover to display at the top stating that the value needs to be entered from the range 0 to 10 only.
How can I achieve this? The popover shown above does not have any example similar to the one I am looking for. Can someone shed some light?
You can adapt the programmatically triggering popups answer (or any of the directives from Good way to dynamically open / close a popover (or tooltip) using angular, based on expression? and tie it to the field validation
<form name="myForm">
<input popover="Should be between 1 and 10" name="myInput" ng-model="test"
popover-toggle="myForm.myInput.$error.max" max="10" type="number"
popover-placement="bottom" />
</form>
I've used the directive from https://stackoverflow.com/a/31372487/360067
Plnkr - http://plnkr.co/edit/2uk4YM5zinM01ayzZKdd?p=preview
This problem only on Google Chrome Browser.
The HTML code is.
<input type="button" value="one" id="btnOne"><br/>
<input type="range" class="rangeSliderOne" min="1" max="5" id="DR" name="DROne" value="0" />
<input type="button" value="two" id="btnTwo"><br/>
<input type="checkbox" value="one" id="chkBox" ><br/>
<input type="text" value="test" id="txtBox" style="display:none" > <br/>
Then I wanna disable the range slider when the slider Change.
So i wrote a jQuery.
$('#btnOne').prop('disabled',true);
$('#DR').change(function(){
$('#btnOne').prop('disabled', false);
$('#DR').attr("disabled", "disabled");
});
$('#chkBox').click(function() {
$("#txtBox").toggle(this.checked);
});
when this execute in the Mozilla Firefox Browser it will work. but in the case of Google Chrome after disabling the range slider the browser get stuck. even we can't inspect the element on the browser. please help me to find a nice solution.kindly replay fast as possible. pls click here: http://jsfiddle.net/XNyMj/
it is causing conflicts because when your code sets attr to your slider #DR to be disabled, it is considered as another event of "change" and triggers itself hence bring it to infinite loop. What you can do is either use another event listener or use remove() instead of attr("disabled", "disabled"); not sure what you want to achieve eventually but there should be other ways to do this. I know your code works on FF, they are of different fault-tolerance level. Also you may want to change this $("#txtBox").toggle(this.checked); to $("#txtBox").toggle("slow"); it's kind of confusion too.
I have this code
<input name="mpan[]" value="" maxlength="2" size="2">
<input name="mpan[]" value="" maxlength="2" size="3">
<input name="mpan[]" value="" maxlength="2" size="3">
<input name="mpan[]" value="" maxlength="2" size="12">
What I have to do is I am provided with a large key for example 0380112129021. When I do Ctrl+C on that key and select any box and press Ctrl+V, the number automatically get pasted in different box, for example: first input box gets 03, next gets 801, next gets 112 and rest gets pasted on last one 129021.how do i achive this from javascript
If you're looking to catch paste events (rather than the literal Ctrl+V), the onpaste event may be for you, and is supported by most browsers according to this answer.
The splitting of the input value you could do using substring().
Easy. On each of the input box, add an onkeyup handler and inspect the input values.
Little clarification, you're trying to do something like serial/key input boxes, right?
okay if you have no idea you should read through some stuff.
i can recommend to read about
javascript - events.
especialy the onkeyup/onkeydown events
stringparsing (substring)
after that you will see the answer glowing on your screen ;-)
a little hint: if you store the pressed keys to a variable, it should be cleared after the action is triggered. and you should check what you have in you keypress cache and clear illigal input.