I'm having trouble displaying the default field value of "1.10" on mobile Safari. Because the last digit is a zero, it's displaying as "1.1". I am not having this problem on desktop systems and is only being shown on mobile safari.
If I set the default value as "1.11" then all the digits show, however "1.10" displays as "1.1". How do I force Mobile Safari to display "1.10" as the default form value?
This is my code.
<label id="mortIns_lbl" for=mortIns>Mortgage Ins. (PMI):</label><div class="dollar">$</div>
<input id=mortIns class=narrow name=mortIns type=text readonly>
<input class="percent necessary" id=miPerc name=miPerc type=number onblur=loan() min="0"
max="3"
step=".01"
value="1.10"><div class="pct">%</div><a title="Most mortgage banks will require mortgage insurance if the down payment is less than 20% of the total purchase price of the property. Once 20-25% of the principal has been payed down, the PMI should be removed. However, until that happens, the mortgage insurance payment will remain. 1.1% is the average, but for further clarification talk to a professional lender.">?</a>
</li>
And here are screen shots showing the problem on Mobile Safari (through Xcode emulator)
The first image shows 1.11 set as the default value, showing the proper digits. Then set as 1.10, which cuts off the zero.
You can test this yourself at EZMonthlyPayment.com on your desktop and iOS device.
You could use a sneaky bit of JavaScript to swap the input between text and number type:
var numInput = document.getElementById('numInput');
numInput.addEventListener('keypress', function () {
this.setAttribute('type', 'text');
});
numInput.addEventListener('click', function () {
this.setAttribute('type', 'number');
});
This is just taken from this really good answer here, it may have other solutions to your problem (although I'm not sure if it works with mobile safari): How can I make the HTML5 number field display trailing zeroes?
Related
Designing a form with an input as a number, from its standard (namely : a default Ethereum ERC20 token) it can have up to 18 decimals (sometimes more for non default tokens). The html element to input it would turn like :
<input name="amount" type="number" min="0.000000000000000001" step="0.000000000000000001" />
It looks like this attributes are too low for the browser I'm using to take them into account and it disables the stepping features altogether (the up and down arrows are not reactive).
Through trial and errors on https://jsfiddle.net/g68t30o5/ I was able to determine it works as expected with 16 decimals (0.0000000000000001) for the Firefox browser.
I'm then wondering if this is a standard limit (nothing about it on https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/step) and/or if it happens to be different on various browsers ?
I have an input field of type "tel" with autocomplete enabled.
<input type="tel" name="phone" autocomplete="tel" />
In Safari (both iOS and macOS), when I start entering a phone number with international prefix, e.g. +49 151, and then choose from the autofill options, the international prefix is removed.
Also, when I listen to change event, the prefix is already missing in event.target.value.
Here is a quick sandbox that demonstrates the issue:
https://codesandbox.io/s/lively-lake-bunh5?file=/src/app/app.component.html
(It happens to be an Angular app, but the issue is not limited to Angular)
How can I get the full phone number in Safari?
I hope this might help.
A full telephone number, including the country code. If you need to break the phone number up into its components, you can use these values for those fields:
"tel-country-code"
The country code, such as "1" for the United States, Canada, and other areas in North America and parts of the Caribbean.
"tel-national"
The entire phone number without the country code component, including a country-internal prefix. For the phone number "1-855-555-6502", this field's value would be "855-555-6502".
link to above
Chrome is being overzealous and thinks my HTML form contains credit card information and thus proposes to fill it in with credit card information.
Are there any attributes that I can use to tell Chrome that there is no credit card information to be filled in, in this form?
The field names it is trying fill in credit card information in are:
reg_id (it puts in a CC number here)
emergency_first_name (it puts in first name here)
emergency_last_name (it puts in last name here)
I don't want to have to disable autocomplete if I don't have to.
The frustrating thing here is the Chrome 'knows better' attitude, where it ignores any value to autocomplete, including off:
<input autocomplete="off" value="" size="10" maxlength="10" id="id_reg_id" name="reg_id" type="text">
Edit: updated following answers.
try
input type="custom"
or use textarea with a single row and resize off
Your browser shouldn't remember your credit card number by default -- I can only assume that you entered into a field that had a 'generic' autocomplete value on it. You can always force your browser to forget this information by simply hitting Delete when selecting it (with the arrow keys) in the dropdown of pre-fill options.
As for preventing it appearing in certain fields, it depends on what information you want each field to hold, but there's a wide array of autocomplete values that you can use. You can use number for IDs, and the other two fields you mentioned actually come with specialised autocomplete values, given-name and family-name:
<input name="reg_id" autocomplete="number" />
<input name="emergency_first_name" autocomplete="given-name" />
<input name="emergency_last_name" autocomplete="family-name" />
If number just won't cut it, you can also make use of a JavaScript regular expression to further restrict input:
const regex = new RegExp("^[a-zA-Z]+$");
const form = document.getElementsByTagName('form')[0];
const reg_id = document.getElementsByTagName('input')[0];
form.addEventListener('click', function(e) {
e.preventDefault();
if (regex.test(reg_id)) {
this.submit();
}
});
<form>
<input name="reg_id" autocomplete="number" />
<input name="emergency_first_name" autocomplete="given-name" />
<input name="emergency_last_name" autocomplete="family-name" />
</form>
I have been banging my head against the desk for a while because of this. We have forms to enter Instruments test data, and a field called "Test Card Number", as well as "Kit (Exp. Date)". Guess what Chrome thinks these fields are for?
Needless to say, I'm pretty sure the users would be VERY upset to see chrome us trying to pull their CC information when they're inputing clinical research data.
Even autocomplete="new-password" and autocomplete="nope" are failing to do any good, here.
I tried to load the field with no label and add it dynamically in javascript. No dice. Used html entities instead of characters. Nope.
Well, after a few hours of scouring the web with no solution in sight, I figured one out: insert a few random - within each word of the offending labels. (For me, with Test Card Number, it had to be in BOTH Card and Number. Test was fine left alone).
One could easily write a javascript extension/utility function to split the html of an offending label and slap that invisible span down the middle (and one to remove it in case of needing to use the label value).
Something like this (using jQuery and old js standards because we support old browsers, with no verifications if label is missing or empty, so adapt accordingly. In fact, I'm sure a regex or some other fancy stuff could be used, but I don't have the time to fiddle around with it atm):
jQuery.fn.breakAutofill = function () {
var $lbl = $("label[for='" + this[0].id + "']"),
finalText = $lbl.html().split(" "),
foilSpan = "<span style='display:none;'>-</span>";
for (var idx in finalText) {
var textVal = finalText[idx],
midPos = Math.floor(textVal.length / 2);
finalText[idx] = textVal.substr(0, midPos) + foilSpan + textVal.substr(midPos);
}
$lbl.html(finalText.join(" "));
}
Which you can then call on document ready :
$("your_input_selector").breakAutofill();
I hope that helps someone.
I am developing a website that is a responsive website, but i got stuck a little with a mobile issue.
When there is an input field that is a 'number' on mobile devices it will pop up the numeric keyboard, but it appears that the 'native' Samsung numeric keyboards doesn't have the minus sign ('-') which is needed in the website, so I've added a button that will appear in mobile browsers and will add the minus sign, but now there is a new problem:
Because the input field is a 'number' i can't add the minus sign programmatically, here is what I've tried to do but it fails:
<input type="number" ng-model="myNumber">
<button type="button" ng-click="myNumber = myNumber + '-'">Add Minus</button>
When the button is being pressed i am getting the error:
Expected '-' to be a number
It kinda make sense because it probably checks if it is a type of number (which is not) and throw this error, but if i will use a PC keyboard or a mobile numeric keyboard that has the minus sign it does accept it.
Is there a way to avoid this error somehow and do insert the minus sign into the input field?
Edit
What i wanted is that it will be the same effect that you get when you have a pc keyboard it means that -5645-56 is possible (because it does possible in an input field 'number') but i guess that even if it is possible it will be much harder to do, and there is not such a good reason for that so the approaches you suggested can work as well.
Thank you!
I think you should just do
<input type="number" ng-model="myNumber">
<button type="button" ng-click="myNumber = (myNumber > 0) ? -myNumber : myNumber">Add Minus</button>
Notice that using input type="number" can display a numeric keyboard as below:
Is it possible to use input type="text" to display the same numeric keyboard? I do not want to display a number pad using pattern="\d*" because it is possible that the value will contain a decimal place.
The reason I would like to use input type="text" instead of input type="number" is that I cannot get back the value if I input a non-number for a number field. For example, if I input ABC, it will become empty automatically. It seems to me that using input type="text" will be easier for this kind of control.
If your input is a true number, integer or decimal then use the HTML5 type="number" input. This will bring up correct keyboard on Android devices (assume Windows phone too).
Then the trick is to place a pattern="[0-9]*" on that attribute to force the special numeric keypad on iOS. Note that:
This will not mark a decimal or minus sign as invalid because the pattern attribute is actualy NOT valid on a type="number" field! and
This is the ONLY way to get the iOS numeric keyboard. See difference between the number section of the alpha keyboard (as in your screenshot above) compared to the true numeric keyboard.
One last note, be sure NOT TO use the type number field for inputs that are not true numbers (eg. zipcodes with leading zeros or product codes with comas or spaces). A numeric input field MAY NOT SUBMIT values that are not true numbers! (depending on browser/device)
The numeric keyboard provided by Apple on iOS is sad joke. But, you can fix this using:
inputmode="decimal"
Work fine on Android, off course.
:)
use this code:
<input type="number" pattern="[0-9]*" />
There are other types which can display numeric keyboard.
With type="number" you can do nothing. It won't accept anything but numbers. But if you use type="tel", it's an ugly hack, but it works.
Here's my zip code example:
<input type="tel" id="Address_ZipCode" class="zip-code" pattern="^\d{2}-\d{3}$" maxlength="6">
There will however be a problem with "-" key on some screen keyboards, you can work around this problem with adding the dash after specified number of characters in JavaScript like this:
// Zip Code dashes
$('input[type="tel"].zipCode').keyup(function(event) {
var t = event.target, v = t.value;
if (v.length == 2) { t.value = v + '-'; }
});
(Please excuse jQuery).
Instead of using type="tel" you can use type="text" and pattern property, but I haven't tested it yet. Most likely it wouldn't work with most browsers.
I couldnt find any solution for that as of now.
But one possible trick you could do is use type="number" and change it in javascript with document.getElementById("element").type="text";
but however this would also clear the ABC but it would accept numbers commas and decimals
Try this workarround. Worked for me.
It will turn type to number then return back to text.
This will force ios to switch to numeric keybord on the first prop change.
The setSelectionRange is for select the input value.
$(function(){
$("input[type='text']").on('mouseup', function(e){
e.preventDefault();
});
$("input[type='text']").on('focus click', function(e){
$(this).prop('type', 'number');
var obj = $(this);
setTimeout(function(){
obj.prop('type', 'text');
document.getElementById(obj.attr('id')).setSelectionRange(0, 9999);
}, 50);
});
});
I tested a few options on different iOS devices
The most supported way is to use the pattern attribute, e.g <input type="text" pattern="[0-9]*" />, since it works on several iOS versions:
Iphone 13 (iOS 15.1)
Iphone 8 (iOS 11.4)
Iphone 6 (iOS 8.1)
If you only need to support iOS 12.2+, using only the inputmode attribute works fine