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
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 am posting a new question after having put a few hours into searching for a solution, and reading through Similar questions.
Using NVDA, when the textbox receives focus, the label (Organization) is read, then the aria-describedby content (200 West Street, New York, NY), and then the value (Goldman Sachs):
<label for="organization">Organization</label>
<input type="text" id="organization" value="Goldman Sachs" aria-describedby="organizationLocation" />
<span id="organizationLocation">200 West Street, New York, NY</span>
For obvious reasons, in this case, it is preferred the label to be read first (Organization), then the value (Goldman Sachs), then the aria-describedby content (200 West Street, New York, NY).
I have also attempted referencing the textbox from the aria-describedby attribute, though the value of the textbox (Goldman Sachs) is repeated, being announced once after the label (Organization) and once after organizationLocation:
<label for="organization">Organization</label>
<input type="text" id="organization" value="Goldman Sachs" aria-describedby="organization organizationLocation" />
<span id="organizationLocation">200 West Street, New York, NY</span>
How difficult is it to achieve the desired functionality?
You generally don't want to dictate how a screen reader will announce an element. Different screen readers may announce things differently. Did you test with JAWS or VoiceOver (Mac) to hear the order?
Elements can have an "accessible name" and an "accessible description" in addition to their role and their value. (See WCAG 4.1.2 and the "Accessible Name Computation"). The name and value are often announced first, and then the description, although as you noted, you are hearing the value after the description. That's just how NVDA is choosing to announce it and will be the expected order by NVDA users. If you change that order, it might confuse NVDA users.
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
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?
I'm looking for complete list of form field names (<input name="…">) that are recognized by auto-fill functions in major browsers.
Here are some I've found to work in Safari using trial-and-error:
email
Ecom_ReceiptTo_Postal_Name_First
Ecom_ReceiptTo_Postal_Name_Last
first-name
firstname
last-name
lastname
full-name
birthday
company
jobtitle
phone
street
city
country
state (used for county outside US)
postalcode
zip
However I couldn't find separate field for title/honorific prefix (it's included in full name only).
Opera's Wand recognizes more or less the same names with exception of name, which requires Ecom_ReceiptTo_Postal_Name_First and Ecom_ReceiptTo_Postal_Name_Last.
I couldn't find field for mobile phone number. Haven't found way to get separate home/work fields.
There's proposal to extend autocomplete attribute to allow developers specify these explicitly.
According to http://www.macosxhints.com/article.php?story=20070527063904285 the file Contents/Resources/English.lproj/ABAutoCompleteMappings.plist within the Safari.app package leads this list:
first
first name
fname
firstname
given name
middle initial
middleinitial
middle name
middlename
middle
last
last name
lname
lastname
surname
name
birthday
date of birth
born
job title
jobtitle
email
e-mail
street
street address
streetaddress
address1
address 1
address
city
state
zip
zipcode
zip code
postalcode
postal code
country
homephone
home phone
eveningphone
evening phone
home area code
home areacode
homeareacode
evening area code
evening areacode
eveningareacode
workphone
work phone
dayphone
day phone
daytime phone
companyphone
company phone
businessphone
business phone
work area code
work areacode
workareacode
day area code
day areacode
dayareacode
company area code
company areacode
companyareacode
business area code
business areacode
businessareacode
mobilephone
mobile phone
cellphone
cell phone
mobile area code
mobile areacode
mobileareacode
cell area code
cell areacode
cellareacode
pagerphone
pager phone
pager area code
pager areacode
pagerareacode
area code
areacode
phone
fax
organization
company
I wasn't aware of the names you used. But I knew Mozilla/Netscape and IE use vcard_name attributes to guide autofill as described here.
There is a RFC for this. But apparently some implementations search for labels rather than using field names.
Did you try Ecom_ShipTo_Postal_Name_Prefix, Ecom_BillTo_Postal_Name_Prefix or Ecom_ReceiptTo_Postal_Name_Prefix for the title?
There doesn't seem to be any option for multiple phone numbers described in the RFC. Just Ecom_ReceiptTo_Telecom_Phone_Number etc
This might be a silly suggestion*, but have you considered getting the source and poking around? Webkit is here, Firefox is here (kinda). It won't help with Opera or IE though.
* It'd be silly for me, c/c++ is all double duch to me :-)
Here is the full list of attributes with a more detailed explanation
https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill
Valid attributes are:
name
honorific-prefix
given-name
additional-name
family-name
honorific-suffix
nickname
username
new-password
current-password
one-time-code
organization-title
organization
street-address
address-line1
address-line2
address-line3
address-level4
address-level3
address-level2
address-level1
country
country-name
postal-code
cc-name
cc-given-name
cc-additional-name
cc-family-name
cc-number
cc-exp
cc-exp-month
cc-exp-year
cc-csc
cc-type
transaction-currency
transaction-amount
language
bday
bday-day
bday-month
bday-year
sex
url
photo
tel
tel-country-code
tel-national
tel-area-code
tel-local
tel-local-prefix
tel-local-suffix
tel-extension
email
impp