I can not disable autocorrect of text input in web browser on Android.
I tried this:
<input type='text' autocomplete='off' spellcheck='false' autocorrect='off'>
Demo:
http://jsbin.com/coqum/3
Both Chrome 35 and Firefox 29 do autocorrect on Android 4.4. Is it an Android bug?
Is there a way to ask Android not to autocorrect?
Update (March 2015)
It looks like the bug has been fixed in Chrome on Android, it now obeys autocomplete='off'. Firefox on Android still autocorrects.
Demo: http://jsbin.com/jivupadolu/1
In experiencing the same issue I did some digging and discovered it is indeed a bug in Chrome for Android. It appears to just recently have been fixed and hopefully should be released in an update soon.
https://code.google.com/p/chromium/issues/detail?id=303883&q=autocorrect&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Also feel free to Star the issue to help boost the ranking...
Currently autosuggest="off" does not work. I reported a ticket for it, so you can vote.
Steps to reproduce the problem:
Open https://output.jsbin.com/qacoforama/3?output in mobile Chrome.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Chrome Android autocorrect</title>
<meta name="viewport" content="width=device-width">
</head>
<body>
<h3>Android keyboard shows suggestions on typing</h3>
<p>when autocorrect="off"</p>
<p><input type="text" autocorrect="off" autocomplete="off"></p>
<p>Tested in Chrome 70.0.3538.80</p>
</body>
</html>
Try to type something in the input field
You will see keyboard suggestions
What is the expected behavior?
You should not see any suggestions, because "autocorrect" attribute on input field set at "off"
What went wrong?
One picture with suggestions is Chrome, and another one without suggestions is Safari
Did this work before? Yes It initially started to work in Chrome 38, can't say about other versions and when it became broken
Does this work in other browsers? No
1) Mobile Safari
There is no such problem in mobile Safari. The keyboard does not provide any suggestions when autocorrect="off"
2) Mobile Firefox
The same problem as in Chrome: autocorrect="off" does not work, so one can see some suggested words
Chrome version: 70.0.3538.80 Channel: stable
OS Version: 7.0
Flash Version:
There is an old issue where the same problem was described https://bugs.chromium.org/p/chromium/issues/detail?id=303883.
As a result the issue was resolved and autocorrect="off" was honored.
But at some moment it was broken and still does not work.
https://bugs.chromium.org/p/chromium/issues/detail?id=901839
Please try this: http://jsfiddle.net/c9HQT/
Basically you are using Javascript to set the value after every keystroke, hopefully interrupting the auto-complete.
$('input').on 'keypress', ->
console.log $(this).val()
$(this).val $(this).val()
Related
I have very simple HTML in my Cordova app for users to input an email and a password. I use two textarea's so I can better control the styling.
<textarea placeholder="password" id="accountPassword" class="customInput login" rows="1" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false"></textarea>
What I've found is that this works fine on iOS but some Android devices (pretty rare apparently) ignore the autocapitalize. I've had Android users report the problem and have now been able to isolate it while testing on a Sony Xperia (European version) running Android 7 (on a testing device farm site).
I've tried several suggestions I found on the web (adding a name field to the textarea, using autocapitalize="none", simplifying the textarea) and nothing helps. By the way, if I change to a regular input field, autocapitalize="off" works fine (on the Xperia) but my customer doesn't want that.
Thanks! Jon
To prevent textarea to capitalize, you easily can add a class like this:
.myTextArea{
text-transform: lowercase
}
I am aware that this has been asked many times, but none of the answers I have seen previously have worked for any devices that I am currently testing. None of the Android, iOS devices or Windows devices (Ranging from tablets to mobiles) implement the numeric keypad.
I am trying to implement a CV2 field on a website, and thus need the items to appear as a password field does. Below is the full input field with all I am currently using.
<input type="password" pattern="[0-9]*" autocomplete="off" maxlength="3" class="fm-input--small" required spellcheck="false" name="cvvNumber" data-alt-name="the last 3 digits on the back of your card" placeholder="e.g. 412" id="cvvNumber" inputmode="numeric"/>
Despite all of these different ways, it doesn't come up with a numeric keypad. Tested on iOS 8.0.3 devices and Android 4.1.2 and 4.4.0 devices.
I have though about changing it to an type=number, and forcing it to be starred out. However, the only solution I have found is this:
-webkit-text-security: disc;
Which unfortunately I cannot use as I need it to be on the Windows devices. Previously as well, pattern=[0-9]* had worked a few months back but now doesn't. Does anyone know if support for this has been dropped?
I am also worried about
inputmode="numeric"
As it is not officially part of the HTML5 release yet. It doesn't work so I don't think it will be included.
I am happy to solve this through more than just CSS by the way. If a small amount of jQuery needs to be written that could be the best way. Thanks in advance!
EDIT:
This works on iPhone iOS 6.1.3. Weird...
In IOS, with help of below script you can open numeric keyboard.
<input type="text" pattern="[0-9]*">
Or
<input type="number" />
and for Android.
<input type="number" step="0.01">
triggering-numeric-keyboards
Hope this help you.
1: Select your UITextfied
2: Go to Attribute Inspector
3: Choose required "Keyboard type"
use screenshot as a reference
I've noticed an issue where the native datepicker that pops up when tapping a <input type="date" /> field on the Android 4.4 (KitKat) browser or webview shows the wrong date. See the following example:
<html>
<head>
<meta name="viewport" content="width=device-width, user-scalable=no">
<title>test</title>
</head>
<body>
<form>
<input type="date" value="2014-10-26" />
</form>
</body>
</html>
Renders just fine (in my local format of DD/MM/YYYY automatically):
But.. when you tap the field to open the datepicker it defaults to today's date!
Anyone else experienced this issue? Maybe my value attribute isn't in the correct format? (I've tried others such as DD/MM/YYYY, but those render with a blank input field)
It seems this is a specific issue in WebViews for Android 4.4.2. There's an issue opened for this bug:
In WebView input type time and date (Nexus 7)
I'm dealing with the same issue, so I hope they solve it.
I'll let you know if I can find any workaround.
Thanks!
I have a PhoneGap app with several fields of input type="text". Besides that it has some HTML textareas.
When running the app on Android and typing text into an HTML textarea element, the Android predictive text works fine. However, when I type text into an input element of type="text" no predictions are shown.
I tested this both on my HTC Sensation and Samsung Galaxy II tablet, both running Android 4.0.3, and the predictive text is not shown on both devices.
This problem can be easily reproduced by adding an input element to the example application that is provided by PhoneGap. I tried removing all css to see if that was causing my problem, but the issue remained.
Does anyone know a way to fix this?
I think text prediction depends of the keyboard you are using not the type of input. Check your text suggestions in the settings of the phone.
I just discovered that this works on iOS:
<input type="text" autocorrect="off" />
Perhaps it might work on Android as well.
The problem is no longer present in current versions of PhoneGap/Cordova.
I've got a jQuery Mobile (1.1.0) app that is running when viewed using Chrome, FF, Mobile Safari and the browser on Android 2.2. However, when viewed in the browser in the Android 4.0.3 simulator there are a range of issues.
These include:
1) Header bar isn't displayed (it displays briefly on show and them disappears - fixed footer is fine).
2) Buttons on the page aren't shown - but still receive and process the click events correctly.
This also happens on a colleague's ICS Android Phone (Galaxy Nexus).
Markup is all fairly standard for jQM. Main buttons are tags, for example. Header is:
<header data-role="header">
<h1 data-bind="text: theTitle"></h1>
<a id="waitButton" href="#" class="ui-btn-left" data-bind="click: wait">Wait</a>
<a id="pollButton" href="#" class="ui-btn-right" data-bind="click: poll">Poll</a>
</header>
[data-bind attributes are for Knockout.js]
Does anyone know what I need to alter to get it working on ICS? Or is this a "work in progress" for jQuery Mobile?
Found the problem. It was this css rule that I added during my iOS testing:
.ui-page
{
/* Supposed to reduce flickering, but screwed up Ice Cream Sandwich. */
-webkit-backface-visibility: hidden;
}
Confirm this.
Upgraded Galaxy 10.1 tab from 3.2 to 4.0.3. JQM 1.1 pages were not loading, showing mostly blank page, and no header.
The solution above fixed all these. Performance seems to have improved also. Our pages do NOT use transition, however.
Btw, input type="date" will activate native date picker correctly. type="number" will allow decimal point as it should have, which was not working on 3.2.
After searching for salvation.. I found something that helped me..
I added:
-webkit-transform: translate3d(0,0,0);
-webkit-transform: translateZ(0px);
to the <div data-role=content ..> and it solved the problem!
Although I still have problems with jQuery's popup which is hiding under other elements despite it's high z-index.