On iOS 8.0 devices when in Safari, users can enter additional characters to input fields with a max-length attribute.
Steps to Reproduce:
Create a html page with a input field that has a max-length attribute
Navigate to the page on an iOS device running iOS 8.0 or later.
Fill the input field with characters until you reach the max-length value
Move the writing cursor to somewhere in the middle of the entered characters
Enter additional characters. This will then make the length of the input value exceed the max-length attribute.
I used the following site to replicate this issue: http://www.wufoo.com/html5/attributes/03-maxlength.html
Should also note that textarea tags behave normally. I only noticed this on input tags.
I've confirmed this only occurs on iOS 8.0 devices.
I've submitted this bug to Apple via the Bug Tracker, but was wondering if anyone else ran into this issue and if so, if they discovered a solution/workaround.
Related
I have a list of phone numbers on my iOS App - all consisting of a simple table layout, with the normal 123-123-1234 syntax. However, one of the phone numbers has a different menu popping up within my iOS App - in that, it's showing a verified number and allowing a user to text or call the number.
Does anyone know why? Thanks in advance!
I recently added a location search field on my site which shows suggestions based on what you type, but on Microsoft edge, a menu pops up on clicking on the input field. How can I disable this menu from appearing on just this input field of my site?
Based on the image you provided, I think this should be caused by some default settings in Edge. If you want to turn off this prompt, just navigate to: edge://settings/personalinfo in Edge and disable this feature like this image below:
I had today the same problem. I had input field without label and empty placeholder. Setting placeholder"..." and making the placeholder transparent makes that edge does not anymore offer "type / ..."
Hth
I believe what you're looking for is:
spellcheck="false" autocomplete="off" aria-autocomplete="none"
The aria-autocomplete seems to prevent that box from popping up and the spellcheck seems to also stop the spell checker one from displaying.
There are places where autocomplete and spellcheck would come in handy, but NOT in single-line fields like email, website, or an <input> where I have my own Bootstrap dropdown-menu/dropdown-item list that displays retrieved DB records via AJAX as the user types (in this case, the Edge popups were ovelaying my DropDown list).
Anyway, adding this code to the <input class="whatever" id="whatever" spellcheck="false" autocomplete="off" aria-autocomplete="none" placeholder="whatever" value="whatever" > seems to solve the issue and you don't have to get all your users to change the browser attributes or mess with the placeholder. Hope this helps... :)
I'm looking for another set of eyes to take a look at the html and css of this page https://www.smartcrowd.ae/e-book/ on their iphone.
For some reason on Iphones only the form will not allow the user to tap into the phone number field. No matter where you tap in the input field, it will not allow you to type anything.
On safari, on desktop, it works but only if you enter the country code first.
It's working fine on google chrome, and firefox and I just can't find what the issue is.
The form is using a third-party plugin which generates the country code field, which seems to be a problem. If I deactivate the plugin the phone number input field works fine.
I've been racking my brain for the last day trying to figure this out.
This did not work on the actual iPhone X hardware
http://braindrain.developmentserver.me/webapp/page/login
If you tap the username field and type, the cursor moves with no text being displayed.
I’m not sure how to fix it. Any help would be appreciated.
Looks like the input is getting updated when you start typing.
I would investigate the angular part of this form.
I'm working on updating some form inputs to HTML5. I'm not interested in validating the data so much as having the numeric key pad on mobile devices. Input type 'tel' seems to do what I want, I get the numeric keypad on iPad/mobile. Input type 'number' will also give me the numeric keypad, but it also includes the spinner box which I don't want.
What I want to know is if it's safe to use type="tel" on a credit card input? Or should I use type="number" and try to disable the spinner somehow. I was reading that disabling the spinner can crash Chrome which isn't a trade off I'm willing to make.
Also, for the time being we're using the exact same site for mobile and non-mobile users.
I looked at this and just tried this on my Xoom with the built in browser and FF mobile (with a desktop UA string) and the tel input would seem to work just fine for this.