In a web page I have an input field and a div that is fixed to the bottom of the window (with these CSS properties: position:fixed; and bottom:0;
I made a Codepen to show what I'm talking about: https://codepen.io/anon/pen/xpQWbb/
Chrome on Android keeps the div visible even when the soft keyboard is open:
However, Safari on iOS seems to draw the soft keyboard over the fixed element:
(I should mention I'm testing on the iOS simulator on my Macbook, because I don't have a working iPhone)
Is there a way to make iOS Safari keep the element visible even when the soft keyboard is open, like how Chrome does it?
4 Answers
Answers 1
i experienced this before. What i did back then was :
- Make a listener when keyboard is hit.
- When keyboard is hit resize you webview's height with screen height - keyboard height.
- To do this trick you need to make sure that you html is responsive.
I can show more code in the IOS side, if you're interested i can edit my answer and show you my IOS code. Thank you.
Hi again, sorry, i was mistaken, i thought you were creating apps with webview inside. If you still wanna do this by listening the keyboard i still have work around for you. It may not the perfect way, but i believe this will work if you want to try. Here my suggestion :
- You still can have listener from webpage when the keyboard is up. You can put a listener on your textfield by jquery onkeyup or onfocus.
- Then you will know when the input is hit and the keyboard will show.
- Then you can create a condition in your java script to manipulate your screen.
Hope this give you an insight friend. @Beaniie thank you !.
Answers 2
No, there is no way.
The keyboard is not part of browser process and there is no way for the browser to know when the keyboard opened. All it knows is that it gets resized, if it does. It's the OS's decision to resize the browser (or any other app requesting the keyboard) or to just draw the keyboard over it and, again, the browser has no control over it and no programmable method to determine when it happens.
As a side note, you should not be using position:fixed for anything except a tiny menu opener (and perhaps the menu itself, when open) on mobile devices.
Answers 3
Try using position:absolute and height:100% for the whole page.
When the system displays the keyboard,it plTaces it on top of the app content. One way is to manage both the keyboard and objects is to embed them inside a UIScrollView object or one of its subclasses, like UITableView. Note that UITableViewController automatically resizes and repositions its table view when there is inline editing of text fields.
When the keyboard is displayed, all you have to do is reset the content area of the scroll view and scroll the desired text object into position. Thus, in response to a UIKeyboardDidShowNotification, your handler method would do the following:
1.Get the size of the keyboard.
2.Adjust the bottom content inset of your scroll view by the keyboard height.
3.Scroll the target text field into view.
Check the Apple developer's guideline to learn more:https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
Answers 4
Check out this thread, it talks about a work around that may be more feasible in terms of code. In brief it talks about using the height of the keyboard to move the content into view. All be it a bit hacky it may be difficult to pin down the exact height of the keyboard across devices.
Unfortunately, due to the nature of the IOs Safari keyboard it's not part of the browser viewport so cannot be referenced as you would do typical elements.
@Bhimbim's answer may a good shot too.
Regards, -B
0 comments:
Post a Comment