We Keep Coding

Dot key restrictions on number keyboard for input type number or tel

I'm currently working on an Angular project where I can have an input field whose type is number. I want to allow only numbers, not other special characters.
If I run my project on mobile, I can't enter a dot character at the first position. But I can enter a dot character as second. See my attached image.
I used this example to avoid special characters inside textbox while typing. Their example is working fine. But on my mobile the dot characters will get placed on the second and third position while typing.
Gow to solve this? I hope someone can help me.
<input type="number" id=txtqty{{i}} pattern="[0-9]*" inputmode="numeric" min="1" max={{data.quan_limit}} [(ngModel)]="data.quantity" (keyup)="quantityModelChange($event,data)" class="Col-tdinput" oninput="$(this).val($(this).val().replace(/[^0-9]/g, ''))">
image

How do I make a negative amount in form field produce a warning error

I have a .html form field that when it changes to a negative number, it Warns users that this field needs to be a positive number ?
Appreciate any assistance.

In the onblur event handler of the html field, write javascript function to check if the value is a number. If it is, check whether it is less than 0. If yes, write css to make field border red or display a warning.
Or,
You can use a field input type number with min value set in html5.
<input type="number" name="f1" id="f1" min="0">

WOW has it been this long, time flys.
This is the Java code "alert" Text that should be shown in a Pop-up tab.
Java Code: start;
Excess_kWh_DayCalc = Daily_kWh_HarvestedCalc - Daily_kWh_Consumption;
if (Excess_kWh_DayCalc <0)
alert("Excess Energy Field needs to remain Positive for calculator accuracy, So Increase the Energy Generated or Reduce the Energy Consumed!");
Java Code: FINISH.
FYI: The Excess_kWh_DayCalc is the html Form Cell Name.

Allow numbers only after some alphabet?

I need to make sure that a certain field only takes numbers as after some default alphabetic characters Like XXX-XX-1234. Here XXX-XX- are default characters which shouldn't be removed. After these alphabets I want the user to be unable to type in any characters other than numbers.
Is there a neat way to achieve this?

You can do with input regex pattern too
<input type="text" name="my_name"
pattern="[A-Za-z]{3}-[A-Za-z]{3}-[A-Za-z]{3}-[0-9]{4}" title="my title">
in your case (removing the number)
<input type="text" name="my_name" value="ABC-DE"
pattern="[A-Za-z]{3}-[A-Za-z]{2}-" title="my title">

Here is a FIDDLE
I wish I could have made this a comment on #scaisEdge 's answer because I just built off of it to add a little more helpful stuff but it is just too much to fit in a comment:
HTML:
<form>
<button>submit</button>
<input type="text" name="name1" value="ABC-DE-" pattern="[A-Za-z]{3}-[A-Za-z]{2}-\d{4}$" title="LLL-LL-DDDD - L is any letter, D is any digit" />
<input type="text" name="name2" value="XXX-XX-" pattern="XXX-XX-\d{4}$" title="XXX-XX-DDDD - D is any digit, rest as is" />
</form>
I used his answer as a base, then did the following to illustrate more:
I added "\d{4}$" to the end of the regex pattern to force 4 numbers then nothing else
I added a new text input that showed how to force explicitly specific characters for the alphebetic/dash portion
I added titles with helpful pattern hints because those are shown in the popup when the pattern is rejected
I put it all in a form with a submit button to show how it all works together
What not to do
I spent a lot of time "rolling my own" code to make a version of a text input that specifically limited all actions on it up front (on input change, keydown, keyup, mouse click) to only allow putting in the last 4 digits and nothing else. It became a game of "chase the corner cases" and I quickly became convinced that using a plugin or library that is thoroughly vetted by the developer community is the way to go for such an endeavor, or using the pattern attribute as discussed above.
Not only was it "vertically oriented" toward this specific pattern, I failed even after much time to iron out all the corner cases and it remained broken.
I even gave an explanation of these difficulties and put up the code and my FIDDLE in this answer, but realized that putting up broken code is just not a good idea on StackOverflow so I made the appropriate edits just now to redo this explanation and get rid of the FIDDLE and code for the alternate route I tried.

input type=number not possible to insert negative numbers on mobile phone

I'm testing my app on my mobile phone (samsung galaxy note II with chrome) and I have a problem with the numeric input fields.
In my app these fields can accept negative numbers, and on the browser it's all fine as I have the - button and also the arrow sliders (from html5) for choosing the number.
On the phone though the sliders are not rendered, and the browser recognise the input type=number, and just renders a simplified numeric keyboard, which doesn't contain the - sign, so I didn't see a way to insert the negative number I wish.
My app uses twitter bootstrap 2.3.2 with jquery, I'm not sure how to solve this problem.
here's the code for one of my input fields that work fine on my computer, but can't use them properly on my phone:
<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1">
in the image you can see how the field in red is marked as wrong because it needs to be negative, but my keyboard doesn't let me insert symbols. including the - sign.
any clue?

The issue is specific to Samsung custom keyboard - hooray to vendors who think they're smarter than everyone. Here is another example of this issue at work

In short, there's no way to make the minus sign show up on Samsung Android numeric inputs. Here are a few workarounds I've run across:
1) Google Keyboard
The user can install a different keyboard (like Google Keyboard). Obviously not ideal to have people install something though.
2) Negate Button
As #Cris already suggested, add a button which will negate the value. If you've got the screen real estate then great.
3) Double Dot Trick
We ended up with a fairly ugly workaround where the user can press . twice and it will negate the number. Totally non-discoverable but an extra button wasn't an option for us.
https://gist.github.com/bendytree/936f6b9b4c0e10138b7e9158b5fd05d9

Make an extra input field. A "sign" checkbox, selecting natural or negative integers.
Then hook the onchange event of the checkbox so that you update the number view to reflect the chosen sign.

If you use the value attribute (value="-0.1") to load an initial negative value then you will have the minus sign pre-loaded for you.
<input class="input-mini" data-type="distance_price" id="distance" label="false" name="distance" step="0.1" type="number" max="-0.1" value="-1">

If you returned here because the Double Dot Trick from above stopped working... It seems an update to how input type="number" fields are handled keeps the second "dot" from even registering as a keystroke stopping the Double Dot from working. In my case, I changed the test line in the JS to
if (lastkey === "." && (key === "." || e.originalEvent.inputType == "deleteContentBackward")){
to create the equally hacky "Dot Backspace Trick"

iPhone adds commas to input number field due to JavaScript

We have an order form which takes credit cards from mobile browsers: <input type="number" id="txtCCNumber" />
Also in addition to that we have a JavaScript which removes any non-integer characters that are inserted into the field:
$('input#txtCCNumber').keyup(function(e)
{
var ccnum = $(this).val();
$(this).val(ccnum.replace(/[^\d]/g, ''));
});
However we just realized that it appears that when people using an iPhone try to put their credit card in, iPhone automatically adds a comma every 3 numbers (because of the JavaScript).
Does anybody know a way to fix this JavaScript so it works?
I do not want to use type="tel". That is not a solution in this case.

Personally, I don't think credit card numbers are an appropriate use of input type="number". According to the spec:
The input element with a type attribute whose value is "number" represents a precise control for setting the element’s value to a string representing a number.
Credit card "numbers" are strings of digits, but they don't identify a particular numeric value, and it wouldn't make sense for a user to enter a credit card number using the up and down arrows that some browsers attach to the input field. Your best bet is simply to use input type="text".
Also, attaching that JavaScript to the keyup event is going to annoy people like me who want to enter their credit card number with separators because it's easier to spot check. Just let people enter their card number however they like and normalize it later.

I don't see a reason why you're using type="number" for a Credit Card number field since you're anyways removing non integer values using JS. Using type="text" would be apt here.

I created a fiddle and tested this on my iphone and it works properly.
http://jsfiddle.net/MH8gj/