Chrome for Android mistakenly autocorrect on contenteditable - android

I have the following contenteditable area
<div contenteditable="true"><p><br /></p></div>
The "<p><br /></p>" is from the database. It's not I hardcarded it on HTML. So I can't change that. That's a very strange behaviour for Chrome on Android.
When I type 'ok', press enter, and then press backspace again, the text is autocorrected as 'OOk'. And the cursor is still on the second line.
You can try this with Chrome for Android: http://jsfiddle.net/73s4pjz9/
How can I solve this strange bug?

Well, you can't, sadly.
To my knowledge (and I've spent hours researching this infuriating bug), there isn't a way to fix it on your end because it's a bug with the WebView class that hasn't been fixed for about 2 years. Basically what happens is Android's autocorrect engine gets out of sync with the contenteditable's selection and things get messy.
Sadly, I wasn't able to find a solution to this bug, so your best bet is to either make Android users suck it up or give them a native textarea without the cool WYSIWYG features.

Related

Disable Android LastPass for contenteditable field

I have a problem with a rich text editor built around a <div ... contenteditable="true">. I've tried disabling autofill in every way that I can -- data-lpignore="true", autocomplete="off", but no matter what I try, LastPass's autofill dialog pops up on Android when I focus into the textbox, making it extremely difficult to use. I can't even dismiss it without it popping up next time I refocus the editor.
How can I make LastPass, and most likely other mobile password managers that I don't use, ignore this div with the contenteditable attribute on it?
It seems that setting the aria-label html attribute on the div fixed this in my case. That attribute alone seemed to solve my issue, even with autocomplete and data-lpignore removed.
I'm not entirely sure why it was broken in my case -- I was using the Quill editor. It may have something to do with how the editor is set up in the framework I'm using. However, this answer should be useful to anyone facing a similar issue.
It would be really great to find out the actual science behind this for a more satisfactory answer!

In Firefox for Android not a single link clicks, it only highlights in grey

If you go on my site on Firefox for Android (either a mobile or a tablet) the links either in the menu, or anywhere else for that matter refuse to click, they only highlight in grey as if they're active, but don't actually do anything.
It works fine in Chrome for Android...I can't figure this one out. Help greatly appreciated.
The site is built in Wordpress
Total Lawn Care link
There seems to be a missing closing </div> tag in the html. I think the div <div class="gwrapper"> is the one causing the problem. Chrome is smart enough to "guess" where things should be closed and still work correctly but firefox has more strict of standards.
try modifying the html and add the </div> where you think it needs to be.
you can go to W3C validator.org
to check for errors in your html. I used an editor like Webstorm to help track the problems.
I hope this helps!

How come some buttons are not working in firefox for android?

how have you been?
Here, my new oddest problem showed up today. I have these magnificent inputs with type button, all around my web app, and this app is meant to run perfectly over mozilla firefox. Everything went well until today, that I realized that some buttons are not working well.
They are rendered according CSS rules, and they are not disabled, cause the data is already validated, but when someone tries to submit the info, nothing happens, not even the normal behaviour of the button getting marked with the dotted line around it's inner text.
The workaround: to pinch zoom the button, and then I can click it, but it is really annoying to do, because some unexperienced users have told me it doesn't work, and I end up giving them an introductory course about a lot of functionalities of mozilla ff, they don't even care.
Please help!!!

h:inputText getting wrong value on chrome browser and android

I have form where several inputText fields are there which are binded to a backing bean. Strange behavior is happening with last textfield which is showing value present in some other text field (random). If I make last textfield as outputText, then that value shift to the previous textField and outputText has correct value then.
Another noticable behavior is when form is getting loaded, it shows correct value but when it is loaded completely, it changes that value to wrong one (randome). Also, on cancel it shows correct value momentarily.
I hope this explanation makes some sense. Anyone else with same kind of problem? Please let me know, if there is any solution for this. Let me know, if more info is needed.
This is happening specifically on Android and chrome browser.
I've experienced some strange autocomplete bugs in Chrome as well which get triggered by very specific form/input names/labels. The Android stock browser uses the same Webkit browser engine (and Apple Safari also), so that explains why they have the same problem. Try updating the browsers. Note that this is not specifically related to JSF.
From the server side on, your best bet is to try to turn off the autocomplete feature by setting the autocomplete attribute of the input elements to off.
<h:inputText ... autocomplete="off" />

Android stops suggesting words

I'm working on a mobile version of the chatroom my website (just a website, not an android application), and the first time I loaded that page on my Motorola DROID everything acted as expected:
click on the input field to select it
tap the same field again to open up the keyboard
start typing
auto complete words are suggested gray-on-white right above the keyboard
After a few refreshes of the page step 4 does not happen! There is no white bar above the keyboard, and no suggestions come up.
I cannot figure out what may be causing it, or how to test it. I downloaded Dolphin browser, and the keyboard behaves correctly the first time, but not the following times (just like default).
All suggestions are welcome.
Edit Apr 8:
As requested a link to the website: http://phantasyrpg.com will redirect to http://mobile.phantasyrpg.com -- you will need to register and visit the "Tavern" from the menu on top left.
Edit Apr 10:
I've created a very empty example that has the same issue:
http://mobile.phantasyrpg.com/test-chat.html I'm also noticing this on other pages as long as the URI is the same -- there's this issue. If there's a GET parameter that's different, suggestions come up correctly.
I'm wondering if there's some setting in my Apache that sends some silly or broken header. But I don't know much about headers.
I've had this happen before... that are workarounds when using a WebView, but AFAIK there's no way to fix this in just a plain site. But basically, there's some sort of cache or something that exists in the browser tab. At first (new tab) auto-complete always works for me. After staying on the same domain in the same tab for a while, it all crashes. For me specifically, after this point the number '7' on the keyboard will sometimes make the browser segfault =\
If you look around the net, you will notice countless bugs filed for the issues showing up in almost all major websites. All complaining the auto-complete stops on Android. I'm pretty it's global, and unstoppable.

Categories

Resources