4

I have an input type email. 

<form>
  E-mail:
  <input type="email" name="email">
</form>

As soon as the user start typing, I would like to give them the option of most popular emails. Ex. @gmail.com ...

See the image below for details.

enter image description here

How would one go about and implement something like this? Is there any plug-in or framework that help me achieve this kind of task?

Will HTML/CSS/JS have the ability to do that or only swift2 can ?

Omar
  • 32,302
  • 9
  • 69
  • 112
code-8
  • 54,650
  • 106
  • 352
  • 604

2 Answers2

2

QuickType is part of the built-in iOS keyboard, and here is no way to access and/or modify it with JavaScript from a simple website. Unfortunately, you can't even detect the keyboard's height, and position some fake QuickType-like buttons over the keyboard, because the keyboard animates up from the bottom, over the current application without resizing or moving anything.

I'm afraid your only option is to add these as small buttons under the input, or maybe you can create something similar to the iOS copy/paste menu, that becomes visible, when the user starts typing in the input, and append the email endings on a click/touch.

frzsombor
  • 2,274
  • 1
  • 22
  • 40
  • You can detect the keyboard height. Add a notification observer for UIKeyboardWillShow. The userInfo supplied to the notification functionn will contain entry with key UIKeyboardFrameEndUserInfoKey which is the frame of the keyboard UI – adamfowlerphoto Apr 25 '17 at 23:35
  • @Spads : I never said it's not possible with Swift, but I'm talking about HTML+JS here. – frzsombor Apr 28 '17 at 11:40
2

I agree with @frzsombor, but I can think of a different workaround. It would take a lot of code though, so it might not be worth it. Anyway, what you could do is periodically take a screenshot and check for one of the colors on the keyboard in a certain position, maybe #ACB3BB (the return button color). If it is there, you could display another Quick Type Bar above the built-in one. The only problem would be if an update to iOS changes what the bar looks like, but you could always update your website. Another possible way to detect the keyboard is here. I think you need jQuery for that, though...

Community
  • 1
  • 1
Nobody
  • 133
  • 1
  • 13