Develop Reference

How to prevent iOS keyboard from pushing the view off screen with CSS or JS

I have a responsive web page that opens a modal when you tap a button. When the modal opens, it is set to take up the full width and height of the page using fixed positioning. The modal also has an input field in it.
On iOS devices, when the input field is focused, the keyboard opens. However, when it opens, it actually pushes the full document up out of the way such that half of my page goes above the top of the viewport. I can confirm that the actual html tag itself has been pushed up to compensate for the keyboard and that it has not happened via CSS or JavaScript.
Has anyone seen this before and, if so, is there a way to prevent it, or reposition things after the keyboard has opened? It's a problem because I need users to be able to see content at the top of the modal while, simultaneously, I'd like to auto-focus the input field.

first
<script type="text/javascript">
$(document).ready(function() {
document.ontouchmove = function(e){
e.preventDefault();
}
});
then this
input.onfocus = function () {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
}

For anyone stumbling into this in React, I've managed to fix it adapting #ankurJos solution like this:
const inputElement = useRef(null);
useEffect(() => {
inputElement.current.onfocus = () => {
window.scrollTo(0, 0);
document.body.scrollTop = 0;
};
});
<input ref={inputElement} />

I struggled with this for awhile, I couldn't find something that worked well for me.
I ended up doing some JavaScript hackery to make it work.
What I found was that Safari wouldn't push the viewport if the input element was in the top half of the screen. That was the key to my little hack:
I intercept the focus event on the input object and instead redirect the focus to a invisible (by transform: translateX(-9999px)). Then once the keyboard is on screen (usually 200ms or so) I trigger the focus event on the original element which has since animated on screen.
It's a kind of complicated interaction, but it works really well.
function ensureOffScreenInput() {
let elem = document.querySelector("#__fake_input");
if (!elem) {
elem = document.createElement("input");
elem.style.position = "fixed";
elem.style.top = "0px";
elem.style.opacity = "0.1";
elem.style.width = "10px";
elem.style.height = "10px";
elem.style.transform = "translateX(-1000px)";
elem.type = "text";
elem.id = "__fake_input";
document.body.appendChild(elem);
}
return elem;
}
var node = document.querySelector('#real-input')
var fakeInput = ensureOffScreenInput();
function handleFocus(event) {
fakeInput.focus();
let last = event.target.getBoundingClientRect().top;
setTimeout(() => {
function detectMovement() {
const now = event.target.getBoundingClientRect().top;
const dist = Math.abs(last - now);
// Once any animations have stabilized, do your thing
if (dist > 0.01) {
requestAnimationFrame(detectMovement);
last = now;
} else {
event.target.focus();
event.target.addEventListener("focus", handleFocus, { once: true });
}
}
requestAnimationFrame(detectMovement);
}, 50);
}
node.addEventListener("focus", handleFocus, { once: true });
Personally I use this code in a Svelte action and it works really well in my Svelte PWA clone of Apple Maps.
Video of it working in a PWA clone of Apple Maps
You'll notice in the video that the auto-complete changes after the animation of the input into the top half of the viewport stabilizes. That's the focus switch back happening.
The only downside of this hack is that the focus handler on your original implementation will run twice, but there are ways to account for that with metadata.

you could also do this if you don't want scrollTo the top(0, 0)
window.scrollBy(0, 0)

const handleResize = () => {
document.getElementById('header').style.top = window.visualViewport.offsetTop.toString() + 'px'
}
if (window && window.visualViewport) visualViewport.addEventListener('resize', handleResize)
Source: https://rdavis.io/articles/dealing-with-the-visual-viewport

In some situations this issue can be mitigated by re-focusing the input element.
input.onfocus = function () {
this.blur();
this.focus();
}

Both IOS8 and Safari bowsers behave the same for input.focus() occuring after page load. They both zoom to the element and bring up the keyboard.(Not too sure if this will be help but have you tried using something like this?)
HTML IS
<input autofocus>
JS is
for (var i = 0; i < 5; i++) {
document.write("<br><button onclick='alert(this.innerHTML)'>" + i + "</button>");
}
//document.querySelector('input').focus();
CSS
button {
width: 300px;
height: 40px;
}
ALso you will have to use a user-agent workaround, you can use it for all IOS versions
if (!/iPad|iPhone|iPod/g.test(navigator.userAgent)) {
element.focus();
}

Detecting hover or mouseover on smartphone browser

I have an alphabetical scrolling bar (ASB) in my app, which most smartphones have in their Contacts app.
Now, I have no problem to scroll to specific item when my finger touchstart touchend click etc.. on the ASB.
But, I have problem on capturing hover or mouseover event on my smartphone.
I have tried touchstart touchswipe touchend mouseenter mousemove or hover with no lucks.
Here's the Fiddle or Codepen to play around on your mobile.
Any suggestion is appreciated.

TL;DR; touchmove, touchstart and touchend are the events that made this possible.
I've found that people keep telling me that it's not possible on non-native app to provide the functionality of hover event on smartphone.
But, the modern smartphone browsers have actually provided the functionalities. I realized that the solution is literally lying in a very simple place. And with few tweaks, I've figured how I can simulate this behavior to cross-platform even though it's a bit cheating.
So, Most oftouchevents are passing the arguments that have the needed information where the user touches on the screen.
E.g
var touch = event.originalEvent.changedTouches[0];
var clientY = touch.clientY;
var screenY = touch.screenY;
And since I know the height of every button on my ASB, I can just calculate where the user hovers the element on.
Here's the CodePen to try it easier on mobile touch devices. (Please note this only works on touch devices, you can still use chrome on toggled device mode)
And this is my final code,
var $startElem, startY;
function updateInfo(char) {
$('#info').html('Hover is now on "' + char + '"');
}
$(function() {
var strArr = "#abcdefghijklmnopqrstuvwxyz".split('');
for (var i = 0; i < strArr.length; i++) {
var $btn = $('<a />').attr({
'href': '#',
'class': 'btn btn-xs'
})
.text(strArr[i].toUpperCase())
.on('touchstart', function(ev) {
$startElem = $(this);
var touch = ev.originalEvent.changedTouches[0];
startY = touch.clientY;
updateInfo($(this).text());
})
.on('touchend', function(ev) {
$startElem = null;
startY = null;
})
.on('touchmove', function(ev) {
var touch = ev.originalEvent.changedTouches[0];
var clientY = touch.clientY;
if ($startElem && startY) {
var totalVerticalOffset = clientY - startY;
var indexOffset = Math.floor(totalVerticalOffset / 22); // '22' is each button's height.
if (indexOffset > 0) {
$currentBtn = $startElem.nextAll().slice(indexOffset - 1, indexOffset);
if ($currentBtn.text()) {
updateInfo($currentBtn.text());
}
} else {
$currentBtn = $startElem.prevAll().slice(indexOffset - 1, indexOffset);
if ($currentBtn.text()) {
updateInfo($currentBtn.text());
}
}
}
});
$('#asb').append($btn);
}
});
#info {
border: 1px solid #adadad;
position: fixed;
padding: 20px;
top: 20px;
right: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
No hover detected
</div>
<div id="asb" class="btn-group-vertical">
</div>

The hover event is triggered with click/touch events on mobile phone, because you can not simply hover an element on a touch screen.
You can demonstrate this behaviour by simply using the css hover and/or focus selectors to modify content, you can see, that before clicking elements remain the same, but after clicking they retain modified styles.

bind touchstart on a parent. Something like this will work:
$('body').bind('touchstart', function() {});
You don't need to do anything in the function, leave it empty. This will be enough to get hovers on touch, so a touch behaves more like :hover and less like :active.
Similar question How do I simulate a hover with a touch in touch enabled browsers?

The code you provided in your Fiddle or Codepen is working fine. So what's the fuss?
Well, in mostly air or touch-triggering gadgets like smartphones and tablets, you cannot simply use the hover thing function because you can't hover thing on it to make some events. You can only use the hover function when you are using for example a detachable keyboard for tablet (or something that uses mouse or finger scroller).

iOS: disable bounce scroll but allow normal scrolling

I don't want the content of my site sloshing around when the user hits the edge of a page. I just want it to stop.
The omni-present javascript solution I see everywhere is this:
$(document).bind(
'touchmove',
function(e) {
e.preventDefault();
}
);
But this prevents scrolling entirely. Is there way to just remove the bounce. Preferably with CSS or a meta tag as opposed JS, but anything that works will do.

I have to add another answer.
My first approach should work, but, there is an iOS bug, which still bumbs the whole page, even if e.stopPropagation.
mikeyUX find a workaround for this: https://stackoverflow.com/a/16898264/2978727
I wonder why he just get a few clicks for this great idea...
This is how I used his approach in my case:
var content = document.getElementById('scrollDiv');
content.addEventListener('touchstart', function(event) {
this.allowUp = (this.scrollTop > 0);
this.allowDown = (this.scrollTop < this.scrollHeight - this.clientHeight);
this.slideBeginY = event.pageY;
});
content.addEventListener('touchmove', function(event) {
var up = (event.pageY > this.slideBeginY);
var down = (event.pageY < this.slideBeginY);
this.slideBeginY = event.pageY;
if ((up && this.allowUp) || (down && this.allowDown)) {
event.stopPropagation();
}
else {
event.preventDefault();
}
});

Disable bouncing by prevent the default behaviour of the document:
document.addEventListener("touchmove", function(event){
event.preventDefault();
});
Allow scrolling by prevent that the touch reaches the document level (where you would prevent the scrolling):
var scrollingDiv = document.getElementById('scrollDiv');
scrollingDiv.addEventListener('touchmove', function(event){
event.stopPropagation();
});
Mind the difference between these two:
event.stopPropagation()
event.preventDefault()
StopPropagation should be your choice here !
Here is a very good explanation:
http://davidwalsh.name/javascript-events
Edit:
Same problem, same solution:
document.ontouchmove and scrolling on iOS 5
Edit2:
fixed typo in variable names
added brackets after methods

If apply to Desktop Browser, don't need any JavaScript codes, just few lines of CSS codes:
html {
height : 100%;
overflow: hidden;
}
body {
height : 100%;
overflow: auto;
}

I tried lots of different approaches I found here on stackoverflow, but iNoBounce was the thing that really worked for me:
https://github.com/lazd/iNoBounce
I just included it in my index.html:
<script src="inobounce.js"></script>

This library is solution for my scenarios. Easy way to use just include library and initialize where you want like these;
noBounce.init({
animate: true
});
If you want to prevent bouncing only on one element and not on the whole page you can do it like:
noBounce.init({
animate: true,
element: document.getElementById("content")
});

iOS 16 started support of css overscroll-behavior.
If you are targeting > iOS 16 devices (including its WKWebview), to prevent overscroll bounce, the solution is simple
add following CSS
html {
overscroll-behavior: none;
}
Tested in iOS 16 and above.

Found a code that worked to me, I believe it will work to you.
The solution is written here: http://apdevblog.com/optimizing-webkit-overflow-scrolling/
Basically, you need to have this js code:
document.addEventListener("DOMContentLoaded", ready, false);
document.addEventListener("touchmove", function (evt)
{
evt.preventDefault();
}, false);
function ready()
{
var container = document.getElementsByClassName("scrollable")[0];
var subcontainer = container.children[0];
var subsubcontainer = container.children[0].children[0];
container.addEventListener("touchmove", function (evt)
{
if (subsubcontainer.getBoundingClientRect().height > subcontainer.getBoundingClientRect().height)
{
evt.stopPropagation();
}
}, false);
}
And then, have your scrollable divs with the class="scrollable".

After trying these suggestions and reading several articles, the fix for me was to use the CSS property < overflow-x: hidden; > on the problematic element/container.

Detect swipe from edge in jQuery Mobile

I want to detect if users swipe from the edge or not before I open the panel with $("#panel").panel("open");. Here is the code
$("#main").on("swiperight",function(event){
var data = event.originalEvent.touches ? event.originalEvent.touches[0] : event,
coords = [data.pageX, data.pageY];
console.log(coords);
});
However the coords didn't return anything because I got error:
Uncaught TypeError: Cannot read property 'touches' of undefined
So is there a way to get coordinate when swipe happens?
Or is there an easy way to detect if the staring position is from
the left edge instead?
Thanks.

Try below in jqm 1.4+, worked for me, adjust the edge trim value accordingly, 50 was good for me
$( "div.ui-page" ).on( "swiperight", function( e ) {
if ( e.swipestart.coords[0] <50) {
// your logic
}
});
this is for x coordinate similarly you can get y from coords[1]

this will work for any screen size:
$("#main").on("swiperight",function( event ){
// take 15% of screen good for diffrent screen size
var window_width_15p = $( window ).width() * 0.15;
// check if the swipe right is from 15% of screen (coords[0] means X)
if ( event.swipestart.coords[0] < window_width_15p) {
// open your panel
$("#panel").panel("open");
}
});

You can do something like this.
$('#main').on('touchstart', function(e) {
var xPos = e.originalEvent.touches[0].pageX;
if(xPos == 0) { //Keep in mind the margin of failure from 0, when user touches.
//Handle edge swipe
}
});

Mouse capture in non-IE browser?

I have made something like a drag-and-drop element with JS.
function Draggable(elm) {
this.d = elm;
this.style.position = "absolute";
elm.onselectstart = elm.ondragstart = function() { return false; }
elm.addEventListener('mousedown', this._start.bindAsEventListener(this), false);
}
Draggable.prototype._start = function (event) {
this.deltaX = event.clientX;
this.deltaY = event.clientY;
if (!this.dm) {
this.dm = document.createElement("div");
this.dm.setAttribute("class", "dragger");
this.dm.onmousemove = this._move.bindAsEventListener(this);
this.dm.onmouseup = this._stop.bindAsEventListener(this);
this.dm.onselectstart = RetFalse;
this.dm.ondragstart = RetFalse;
}
document.body.appendChild(this.dm);
this.lastX = this.lastY = 0;
this.ondragstart();
return false;
}
Draggable.prototype._move = function (event) {
var newx = (event.clientX - this.deltaX);
var newy = (event.clientY - this.deltaY);
if (newx < this.x0) newx = this.x0;
if (newx > this.x1) newx = this.x1;
if (newy < this.y0) newy = this.y0;
if (newy > this.y1) newy = this.y1;
this.d.style.left = newx + "px";
this.d.style.top = newy + "px";
if (window.getSelection) window.getSelection().removeAllRanges(); else document.selection.empty();
return false;
}
Draggable.prototype._stop = function (event) {
document.body.removeChild(this.dm);
return false;
}
The "dragger" is transparent DIV that fills the whole page, to prevent the dragged target from losing capture when mouse moves too fast. (If I could capture the mouse, I would need it.)
.dragger {
cursor:move;
position:absolute;
width:100%;height:100%;
left:0px;top:0px;
margin:0px;padding:0px;
z-index:32767;
background: transparent;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
}
However, if I:
Press left mouse button on the draggable element
Drag it outside the client area (outside the brower window)
Release mouse button
The element will lose the capture, so that if I move the cursor back,
without having receive a mouse-up event, the element follows the cursor everywhere.
(until you click to make a mouse-up again.)
Just now, I saw it perfectly done on this website: (www.box.net)
Even if you release mouse button outside the browser window, the blue selecting box can still resize when the cursor moves, and disappear when button is released.
But I cannot receive any mousemove or mouseup when cursor is outside.
What API can I use to capture the mouse?
As you can see, I'm using Chrome Browser.
It is said that there's no API like HTMLElement.setCapture in non-IE browser.
This page uses jQuery, but what does jQuery use?
What is the raw javascript Code to do that?

Instead of creating a big, transparent element (dm), bind your mouse events to window.
It gets mouse events everywhere on the page; during dragging you'll keep getting mousemove events even if the cursor goes outside the window, as well as a mouseup if you release the mouse button outside the window.
P.S. If you call .preventDefault() on the mousedown event, the browser won’t select any text and you won’t have to clear the selection on mousemove.

Although it is a little outdated (FF now supports setCapture), I found this article to be extraordinarily helpful. The basis of the fix goes something like this:
var dragTarget = element.setCapture ? element : document; // setCapture fix
I've set up this little example. The javascript is copied straight from a webpage I'm building for a client where it works perfect*. Unfortunately I haven't been able to find a fix for draggable content inside an iframe, so it will still appear broken in Chrome if viewed at jsFiddle, Codepen, etc. You'll have to trust me that it works (or try it out yourself). If anyone knows of a fix for this iframe issue, please share.
*in Chrome, Safari and FF, I haven't tested in Opera or IE yet