iPad webApps on screen keyboard - javascript

I have an HTML web-app which runs in a viewport. The web-app does not scroll. It is all contained within one screen.
I added a text-field into my app. When I press the input field the on-screen keyboard pops up.
1. The keyboard pushes the web-app upwards for some reason (The view-port defines a resolution which should not allow scrolling).
2. When I am done the app stays "scrolled" off-screen.
Is there a way to fix this? Is there a way to control the keyboard using Javascript/CSS?

Crude, but can you handle the blur event on the form field then call window.scrollTo(0,0)?

Related

How to ensure focused input retains visibility when on-screen keyboard is activated

While building a mobile-first website, I have run into the common problem where an input element may be covered by the on-screen keyboard on a mobile device when it is activated.
If I were building a native app with React Native, I could use KeyboardAvoidingView:
KeyboardAvoidingView
It is a component to solve the common problem of views that need to move out of the way of the virtual keyboard. It can automatically adjust either its position or bottom padding based on the position of the keyboard.
- https://facebook.github.io/react-native/docs/keyboardavoidingview
How can I ensure that the focused input remains visible when the on-screen keyboard is activated?
I considered listening to the resize event on the window and focusing the last focused input, but I'm not sure what side effects this may have nor if it is a viable solution.
The resize event is probably your best bet. Something like:
document.activeElement.scrollIntoView()
should do the trick.

Autocomplete force pac-container above search box

I am having a hard time figuring out how to do this.
I am using google.map.places.Autocomplete and its all working fine, but due to app/screen sizes the pac-container with the returned search listings is behind the devices virtual keyboard - and thus on about half of the devices I have tested the user can't see the returned address list. Obviously you don't want the pac-container in front of the keyboard because then various keyboard keys will be hidden.
How can I force the pac-container to appear above (and scroll up) the search/input box?
The simplest way is to check when the keyboard opens and then minus margin the page a bit.
body.keyboardopen {
margin-top: -#keyboardheight;
}

Javascript Prevent Default - Prevent Swipe Back Only

On a web app that I am working on, one of my elements is pretty large (a table), and thus, reaches near the edges of the iphone's screen.
When a user touchmoves on the element, the user can select various things that appear within the table. When the user's finger is in the table, I prevent all default touch actions. However, I do not prevent default touch actions universally on the page because I want the user to still be able to scroll and zoom normally when outside the element.
The problem I am facing is that if the User moves just a little bit outside the element while engaged in a touchmove, the user often ends up swiping back.
Like I said, I do not want to prevent default universally because scroll and zoom are important to me on this particular page. Is there a way to prevent back swipe only using jquery, polymer, javascript, or some combination of all three?

Zoom out automatically on iPhone safari browser using javascript

I have designed my webpage to fit an Iphone screen perfectly. It has a small text box in the top corner.
When the user clicks on the text box to type in the text, the Iphone browser automatically zooms into the top corner of the screen, which is totally cool. But after the user hits search the browser is still zoomed into the top corner. The user has to manually zoom out to see the full screen.
Hence I would like to know a way to fix this issue by calling a javascript that will zoom out automatically and shows the full web page.
Thanks
I'm having the same problem/requirement, so I was hoping to find an answer here (which I haven't).
Here is what I've got so far:
Add an 'onblur' event handler to the text box mark-up (in the HTML, where you declare the text box).
The callback is triggered after the 'Done' button is pressed.
At this point, I'm not sure how to zoom out back to the previous zoom-level.

vertically moving javascript button or menu on uiwebview

I am facing lots of problems in handling the touch event of the uiwebview for making my tabbar and navigation bar hides/unhide. I thought of putting a horizontally moving button or a small text on the uiwebview which will move along with the user scrolling.
If the user touches the button which moves along with the user scroll i am planning to show or hide the nav and tab bar. Is this possible in uiwebview ? if yes please give me an idea or bunch of code snippets for writing such a menu using javascript
You may need a UIView that contains the UIWebView, along with other controls you mentioned, e.g. buttons. You may make the button semi-transparent and receive touch events.

Categories