Weird iOS device specific issue with form input - html

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.

Related

Issue with website form input field on IOS devices

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.

How do I make Chrome's autocomplete drop-down appear only after I begin typing (instead of on initial mouse click)?

Please help!
Recently (probably with version 66), Chrome began displaying its autocomplete-suggestion drop-down on the initial mouse click into a search field instead of waiting until a character is typed.
How do I make Chrome go back to not displaying suggestions until I begin typing?
I have always made use of Chrome's suggestions drop-down for search fields, but I don't want or need to see a list of random suggestions just because I've clicked into an input field. I only want to see suggestions that match what I start to type (which is how it always worked until recently).
I tried disabling the "Single-click autofill" flag and even the "Show autofill predictions" flag as well, but these flags don't seem to affect the situation. Perhaps the term autofill in these flags doesn't refer to the same thing?
If anyone can help me with this, I'll be your best friend forever and ever!
Thanks for reading this.
I was having the same issue recently with a datepicker input. To get around it, I wrapped my inputs in a form and set autocomplete="off" in my form tag, as Chrome only recognizes that property for forms and not individual inputs. I added a keyup event so that if the input has text in it, autocomplete is re-enabled:
if (val.length > 0) {
$('#myForm').attr('autocomplete', 'on');
} else {
$('#myForm').attr('autocomplete', 'off');
}
You can also add an onBlur event to disable autocomplete suggestions each time you leave an input.

Focus html mobile

I am looking for a way to place the focus on an input field, without having the keyboard of the phone shown. The same as autofocus but after the page is initialised. Not focus() because like I said I don't want the keyboard to be shown. Does anyone know a way to do that? I am working with angular 5 if it can help. Thanks.
Nevermind. I found a way using a Timeout of about 100 milliseconds. On click I put the input field in readonly, which does not show the keyboard, then after the timeout, I remove the readonly allowing the input but not the printing of the keyboard.

Autofocus text field on mobile, but no keyboard?

As part of my login and registration forms, if there are errors then it will autofocus the related field. Actually, it not as simple as I thought. Let me try to explain!
Basically, on this project, pages are loaded with AJAX. Forms may include an autofocus attribute. This works great, but on mobile it just shows the cursor without bringing up the keyboard, meaning you still have to tap the input to start typing.
Am I missing something, or do I have to double-up the focussing with something like
document.querySelector("[autofocus]").focus();
// with appropriate verification that the element exists, of coursr
In mobile devices (at least in Apple's Safari), the keyboard isn't allowed to show up without the user clicking on the input field. It's by design, and I don't think there is much you can do about it.
http://www.quora.com/Mobile-Safari-iPhone-or-iPad-with-Javascript-how-can-I-launch-the-on-screen-keyboard

Disable back space key for browser based AS3 application

this is insanely annoying problem:
AS3 full screen application based on ADOBE FLEX 4, text field. User types something in text field, and then starts clicking backspace many many times to remove what he just wrote, and for some reason, instead of removing characters from text field it tells browser to GO BACK and user navigates away. Why?! Please, please help, this is so terrible. My users are losing important unsaved this is data while using my application!
i am using safari browser
PLEASE HELP.
Wow, this is terrible, I am so irritated, it happens every single time
It is possible that the focus is lost from your text field when hitting the backspace multiple times (check if you are firing some events on the text field that may cause this), which causes the main window to take focus and trigger 'Back' on the browser.
The root of the problem is that the browser carries out keyboard shortcuts REGARDLESS of the flash app having the focus or not. From what I heard this problem does not exist on Safari's for Mac, only Safari for Windows.
I would check to see what browser you are in and then create a popup saying you this app does NOT work on Safari browser ON windows.
Scratching head*
Well maybe if HAD to solve this, I would use the ExternalInterface to interact with Safari or javascript to PREVENT the history back button from getting applied. So it won't go back to an old page. That is what I would look into.