How to detect when a digital keyboard is displayed (on mobile)? - javascript

I'm running into a very annoying issue.
I have a html canvas that is full screen. When changing the screen size it detects that the screen size has changed and automatically re-scales the canvas to the 'new' full screen.
I put a object into the canvas (basically a text input field).
On mobile when clicking on this object the virtual keyboard pops-out and apparently changes the screen size. By doing this the canvas scales to the 'new' screen size.
I want to ignore the automatically scale function when a digital keyboard pops out.
Is there any way to detect when a digital keyboard is displayed?

The only thing I can think of to fix this is to stop the page from resizing if there is a digital keyboard displayed:
$(function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
$("html, body").css({"width":w,"height":h});
});

Related

Why "screen.height" works fine when using Chrome' DevTool to simulate mobile devices, but not on real mobile devices?

The screen.height I am talking about is described in https://www.w3schools.com/jsref/prop_screen_height.asp
I used screen.height < 560 ? true : false to determine whether the screen height is smaller than a threshold, so I can hide some UI elements in this case.
It works fine in Chrome's simulator for mobile devices (the feature highlighted below).
By "works fine", I mean when simulating a mobile device, like setting device to be iPhone X as shown above and displaying in landscape mode, the UI elements are hidden correctly due to screen.height < 560 = true.
However, on real mobile devices like a real iPhone X, the UI elements don't get hidden, which I guess is because that it is always screen.height < 560 = false, even if it is in landscape mode.
I am wondering why is that... Why iPhone X in DevTool has a different height from a real iPhone X?
Is the simulation in Chrome DevTool not accurate? Or is it because screen.height doesn't return the correct value on mobile device?
Any hints would be appreciated!
That's because the simulator takes the screen size according to the dimensions that you are setting there. But in reality, screen.height takes the height size of the whole screen, including elements that are outside of the viewport in the device. You should use window.innerHeight to get an accurate height size.
If you log in your console screen.height and window.innerHeight on the simulator, you will get the same size. If you do this in the normal viewport (deactivating the simulator), you will get different values.
More info: Screen Height - Window InnerHeight
UPDATE
screen.height doesn't update on screen rotation, always has the same value corresponding to the screen height in portrait mode, while window.innerHeight takes the current height of the device window either portrait or landscape. Just make sure to fire this in the event when the rotation happens.
For this, you could use the Window.matchMedia() like so:
// Breakpoints
const breakpoint = window.matchMedia('(max-height: 560px)');
// Breakpoint checker
const breakpointMutations = () => {
if (breakpoint.matches === true) {
// Do something
}
}
// Run breakpoint checker if media changes
breakpoint.onchange = function (event) {
breakpointMutations();
}
// Run breakpoint checker on load
breakpointMutations();
It might be because you are missing the response meta tag. Try adding this to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">

Detect When Soft Keyboard is in Use abd Run a JS Function?

I have a site that opens a modal upon click that contains a form. I noticed on my iPad that when the soft keyboard is open it covers several fields of the form, and as I am near the bottom of the screen, I cannot scroll to reveal those hidden fields.
In researching this issue I came across this answer which includes code from this answer. However, neither of these answers seem to work when tested on iOS 8.3.
Here is what I would like to achieve:
Detect when the keyboard is opened.
Find the height of the keyboard.
Add padding to the bottom of the footer to accommodate the height of the keyboard.
When the keyboard is dismissed or closed, the padding is removed.
There are a few things to note:
If someone is using a connected keyboard (including bluetooth keyboards) don't do anything as the soft keyboard shouldn't appear
jQuery is okay to use.
A solution must run via client side code.
I prefer a solution that covers iOS and Android. Preferably, any device that can use a soft keyboard.
How could I achieve a solution that will increase the padding in my footer, that will work on the majority of devices, when someone is using a soft keyboard as a means of filling out a form in a modal?
I bumped into a problem similar to this not too long ago and I found a small solution to this, when a mobile or tablet is being used and a keyboard is activated it triggers a resize event of the screen so you could use that to trigger a function.
var lastHeight = $(window).height(); // store the intial height.
var lastWidth = $(window).width(); // store the intial width.
var keyboardIsOn = false;
$(window).resize(function () {
if ($("input").is(":focus")) {
keyboardIsOn =
((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
}
if(keyboardIsOn){
var keyboardHeight = lastHeight - $(window).height();
$("footer").css("padding", keyboardHeight+"px");
} else{
$("footer").removeAttr("style");
//or if you just want to remove the padding
//$("footer").css("padding", 0);
}
});
//An alternative solution is by checking if the height of the screen
//change on input/textarea focus.
$('input, textarea').focus(function() {
keyboardIsOn =
((lastWidth == $(window).width()) && (lastHeight > $(window).height()));
if(keyboardIsOn){
var keyboardHeight = lastHeight - $(window).height();
$("footer").css("padding", keyboardHeight+"px");
} else{
$("footer").removeAttr("style");
//or if you just want to remove the padding
//$("footer").css("padding", 0);
}
});

Resize textarea with screen orientation in firefox os

I'm trying to create a simple text editor for Firefox OS where I use testarea as user's text field. As I'm using the simulator when I change the screen orientation from portrait to landscape or vice verse I need the textarea to change its orientation automatically and get the full screen size. But every time I change the orientation I need to reload the app :(
and if I try screen.orientation it results undefined.
Bellow code I use to get the screen size
HTML:
<textarea id="input-text" onfocus="TextareaOnFocus()" onblur="TextareaRealeseFocus()"></textarea>
Javascript:
var textAreaSize = document.getElementById("input-text");
textAreaSize.style.height = screen.height - 74 + "px"; // -74, so that the field is not edge to edge
textAreaSize.style.width = screen.width - 21 + "px"; // -21, so that the field is not edge to edge
And is there any way to change the keyboard size, cause it cover half of the screen so my text filed becomes very small.
Just set the size of the textarea in CSS, as we now have cool stuff like calc and vw/vh.
#input-text {
height: calc(100vh - 74px);
width: calc(100vw - 21px);
}
Will automatically work when rotating as well.
The reason that screen.orientation doesn't work, is because the orientation API is non-standard at the moment, so you need to prefix with moz. F.e.: screen.mozOrientation works fine.

Mouse tracking of page - and displaying it

Basically I am trying to create a little image at the top corner of a webpage, which would stay in the same position even if the page is scrolled and would show the position of the mouse.
The point is to have a large webpage that would extend down and right, and navigation of this large page would be easier if I had a little image that indicated where exactly the visitor is on this page (as the browser window is smaller than the page). I wanted to to just track the browser window position on the web page, but I cannot find anything that would help me do it, so I thought I might do it with just the mouse movement. The problem is that I know about nothing about java, so does anyone know how I could track the mouse position on the page (not the browser) and display it at the same time on a small image on the upper corner of the browser?
This would work, but only in modern browsers that support css3 transforms (scale):
JsFiddle
It works by copying the whole page that should be in the .actual-page div into a .thumbnail div which is positioned on the top left of the page. Then I scale the cloned page with css transforms and use javascript to replicate mouse movements into the little box, here's the script:
var TinyNav = function() {
this.init = function() {
var clone = $('.actual-page').clone();
$('.thumbnail').append(clone);
$('.actual-page').on('mousemove', function(e) {
var posX = e.offsetX;
var posY = e.offsetY;
$('.thumbnail .cursor').css({
top: posY / 10,
left: posX / 10
});
});
}
this.init();
}
var tinyNav = new TinyNav();
Another way of doing it would be using canvas, but browser support isn't the best with that either..
Hope this helps

JavaScript algorithm to determine orientation of tablet

We're building an HTML5/JavaScript app developed for tablets, and we want to lay out my screens differently in landscape versus portrait.
Originally, we were capturing orientation change notifications, and keeping track of the current orientation (generally reported as 0, 90, -90 or 180 degrees -- see this question). Unfortunately, different devices report different orientations as "0". That link argues that it's a bug, but there's some evidence that this is working-as-designed -- for example, this article suggests that "landscape" is the default orientation and those devices report an orientation of "0" when held in landscape mode.
We next tried to just look at the actual screen size, assuming that when width was greater than height, we were in landscape mode. But this algorithm gets confused when the on-screen keyboard is displayed -- when the keyboard is displayed, the dimensions of the visible area are returned. When the device is, strictly speaking, in portrait mode, but the portion of the screen not obscured by the keyboard is wider than it is tall.
The response to this question is quite old. Is that still the best answer? Does anyone have a good algorithm that takes the keyboard visibility into consideration?
http://jsfiddle.net/jjc39/
Try this:
<span id="orientation">orientation</span>​
$(document).ready(checkOrientation);
$(window).resize(checkOrientation);
function checkOrientation() {
var orientation = "Portrait";
var screenWidth = $(window).width();
var screenHeight = $(window).height();
if (screenWidth > screenHeight) {
orientation = "Landscape";
}
$("#orientation").html(orientation);
}​

Categories