Android keyboard hide text inputs - javascript

I have an application using jQuery Mobile.
When testing on Chrome (on Android), when the keyboard is opened, some inputs located at the bottom of the page are automatically moved to the top. That the behavior I expect.
When I add this website into the Home Screen of my android, this behavior does not work, and all text inputs are hidden by the keyboard.
I have also remarked that when I open again the same application on Chrome, and after retry the Webview-based app, everything is now OK. The inputs are not hidden anymore.
Do you already seen this kind of error ?
Thanks by advance

I created a demo for you, as an alternative
I had to append a blank box to create some space at the bottom and then move the input up to the header when you focus on the input because its at the bottom so no scroll space.
Demo
https://jsfiddle.net/fyom081o/
Code
$(document).on("focus", "#text-basic", function(event){
var boxheight = $(window).height() - 40;
$("#mycontntent").append("<div id='blank' style='height:"+boxheight+"px;'"+"></div>");
$('html, body').animate({scrollTop: $('#text-basic').offset().top - 100}, 500);
});
$(document).on("focusout", "#text-basic", function(event){
$('#blank').remove();
});

Please see the answer from when I raised this same question...
Jquery Mobile 1.4.5 virtual keyboard in the device hides the form inputs at the bottom of the page
I opened an issue with JQM and this is the response I got. Turns out it's a Chrome fullscreen browser bug, nothing to do with JQM...
The only way i could think to attempt to work around this would be something like http://jsbin.com/kagidi/9/edit?html,css,output which fixes the issue on chrome homescreen however this is not really a complete fix it has a few issues that cant really be solved.
There is no way to know the keyboard size, and there for how much height to add to the body, on a particular device even more so when you keep in mind custom keyboards.
It requires a lot of userAgent sniffing to make it work properly
Because of these issues this is not really something we would add to the library i don't think. However this may solve your issue

Related

disable resizing my webpage on iOS - html, css

I have a problem with a web page I built that in iOS, not sure what versions, but I'm testing it on the new iPhone X(and newest iOS), it's possible to kind of resize the whole webpage.
I checked other regular sites and doesn't seem possible to do that.
So i'm guessing maybe some easy CSS can do that.
It looks like this (this is not my site, just another site that's it's possible to do it with)
It does not change my actual viewing of the site, I can only drag and move it, but when I let go, it goes back to the full screen.
You can see the movie here of how it moves: https://vimeo.com/263628559
I have fixed items on the screen, so it's not any particular div that it's been done too.
It was not that, I found a solution with jQuery
$(window).bind('touchmove',
function(e) {
e.preventDefault();
}
);
Good luck to all :)

Android keyboard seems to toggle jquery .slideToggle, anyone know a fix?

I'm currently developing a site where I hide the header in mobile devices, it can be opened using a anchor with a jquery slideToggle function. Great stuff. Inside the header there's a search field and some other buttons.
However, when I focus the input on android and the virtual keyboard opens up my header closes. hiding the search field and everything else in it.
I have come to the conclusion that it is the keyboard that toggles this "bug".
Have anyone ever seen this before? I have no clue what I'm even looking for. Bloody android! :)
Thanks,
Robin
var searchToggle = $('.search-toggle'),
subHeader = $('.sub-header');
searchToggle.click(function(){
subHeader.slideToggle();
});
Problem solved. Found out that when the keyboard opens up the window trigger a resize function I used.

Events not honored on text inputs or textarea elements within iframe on ipad ios 5

I have a form within an iframe on a website that I am testing on iPad. It seems that the touch events do not work on the inputs with type "text" or textarea elements. Swiping or touching does nothing on those areas and the keyboard does not pop up. The combo box (select) elements I can interact with just fine. Is anyone else having this problem?
I have no issues on iPad iOS 4.3 only on iPad iOS 5. The markup and styling are pretty standard, but if no one else is experiencing this issue I can post the code. The only unique element that I can think of is that all of the markup is loaded dynamically using jQuery tmpl.
I have only seen documentation online regarding scrolling of textareas but this seems to be a separate issue.
Correction *
I just hit the page directly (outside of the iframe) and am still having the same problem. So has anyone seen this behavior before? Is it due to strange CSS styling? Z-indexing?
OKAY GOT IT! So I noticed that click events were registering but default drag behavior was not. I also remembered that I had implemented a jquery ui extension for draggable behavior that hooked touch events into their click and mousemove event handling. That was the culprit. I removed that extension and added this instead : github.com/furf/jquery-ui-touch-punch This works on both iOS 4.3 and iOS 5.1
I guess that has to be a bug in iOS...
Or could you post a link to what you have made?
I could test it on my iPod Touch...
I've had this problem for days now, and from googling around, most of the internet has too. But none of the posts contained an answer. This is the solution that worked for me. It's based on https://gist.github.com/tamarasaurus/dcf2d0331043586421f3. Hopefully this will help people in the future, or at least point them in the right direction.
document.addEventListener('keydown', function(e) {
window.focus();
});
document.addEventListener('touchend', function(e) {
window.focus();
});

IE9 Window Loses Focus due to jQuery Mobile

In our product, we're using the most recent development version of jQuery Mobile in our ASP.NET website. Each and every time we do an ASP.NET postback, the browser window goes to the back of the screen.
Example:
Maximize any window. Example: Visual
Studio, Word, Windows Explorer.
Maximize IE9 over it. IE9 is the only
thing you see on the screen.
Click on a button in our solution that does
a postback.
IE9 is no longer visible.
Whatever was behind it now has focus
(and fills the screen, as it is
maximized)
Only workarounds I know:
Don't include the jQuery mobile scripts.
Ensure IE9 is the only maximized window in Windows.
I don't know what jQuery Mobile is doing in the background and am assuming this is a bug in IE9 that will eventually be fixed. However, if you had any tips on how to prevent it from happening in the meantime, that would be great.
Edit: Seems it isn't on every postback. It is on every postback that performs a Response.Redirect. I should add that all my postback are actually utilizing ASP.NET AJAX, not full postbacks.
I know this is an old post, but for people coming here from Google:
I ran into this same issue today. It seems this lose focus behavior is what IE does when you trigger the blur event on the window object. This was the code that caused this issue for me:
$(document.activeElement).blur();
activeElement will default to the body element when there are no other elements in focus, and the blur event then bubbles up to the window. To fix this I simply did a check like:
if (document.activeElement != $('body')[0]) {
$(document.activeElement).blur();
}
I had similar problem with IE10 and jQuery 1.7.2.
I found these lines in my code:
$(document.activeElement).blur();
and
$(':focus').blur();
So, adding simple .not('body') resolves the problem:
$(document.activeElement).not('body').blur();
$(':focus').not('body').blur();
This same issue seems to occur with jQuery Mobile 1.4.2.
When using IE 10, with a single tab open and another window on the same monitor, if you open a popup it will send the browser to the background.
To fix this you have to edit the _handleDocumentFocusIn function. You need to change the line(10391) that reads:
target.blur();
to
if (targetElement.nodeName.toLowerCase() !== "body")
{
target.blur();
}
I made a pull request so hopefully this will be included in the next version.
Just posting this link to anybody who is experiencing more of this continued mess. I am seeing the problem on IE 9 and IE 10 on a window.location = 'BLAH', from within the Angular location resource.
This doesn't seem to solve the problem for me, but it may help others:
http://support.microsoft.com/kb/2600156/en-us

How do I focus an HTML text field on an iPhone (causing the keyboard to come up)?

I'm writing an iPhone web app, and I want to automatically focus a text field when the page is loaded, bringing up the keyboard. The usual Javascript:
input.focus();
doesn't seem to be working. Any ideas?
It will only show the keyboard if you fire focus from a click event, so put a button on the page with a onclick that does the focus and it will show the keyboard. Completely useless except for validation (on click of submit validation code focuses on invalid element)
Edit: The following no longer works on iOS - UIWebView did allow autofocus and home screen links used to autofocus but they disabled that many versions ago.
The autofocus (see below) property doesn't work from a url in Mobile Safari but does work if you are:
using a UIWebView
using a home screen link
The fontsize of the input needs to be large enough to avoid the iOS10 zoom on double-tap (now that viewport is always zoomable) and to design the page to be sized so that it fits the screen (otherwise on page loading you get strange timing/race bugs in zoom, or if scrollable the field sometimes doesn't center to the screen properly).
autofocus: The HTML5 spec for doing this is the autofocus property of the input tag. But iOS ignores that, presumably for a cleaner UI that doesn't pop up the touch keyboard when navigating to a page. Here is a page that demonstrates the autofocus property. Before HTML5 you would call element.focus() in the window.onload event. However focus() calls are not supported on iOS except during the handler of an onclick event.
Note: this answer is old and may not be relevant to newer versions out there...
It comes as no help to you but the last poster in this thread wrote that its a bug of the webkit engine.
I can't tell if its a verified bug or not...
Last post from way back machine (as original seems to not work):
I am developing my app in pure XHTML MP / Ecmascript MP / WCSS. So
using native platform browser control api is really not an option for
me. Yes the behaviour u mention is the same as mine. I searched his
topic in the bugzilla at webkit.org and found that this indeed is a
reported bug. focus() to a text box does highlight the element but
does not provide a carat in it for the user to start entering text.
Using a timer as mentioned by "peppe#peppe.net" does not help either.
This behaviour is common across platforms (s60,iphone,android) which
use the webkit engine.
So as of now i dont see a solution to this problem.
Hope this helps
I have a similar issue, only my issue is that the focus will not occur on a 'touchend' event.
http://jsfiddle.net/milosdakic/FNVm5/
The following code will work in Chrome/Safari etc. but will fail on Mobile Safari. The only way to get it to work is to make the event on 'click', but seeing as the code is made for an iOS device, it would benefit for it to work with touch events.
It seems to be a bug with the Webkit engine.
If you are setting focus with from a click event, you need to preventDefault otherwise the click events default action will set focus on the clicked item.
A bit late maybe but for future person maybe. In our webapp running on iOS iPad (6 and more recent), we do it with a set interval:
startFocusOnTextField: function() {
this.intervalIDForTextFieldFocus = window.setInterval(function() {
document.getElementById(page.textInputFieldObj.id).focus();
}, 150);
},
Which is called on page load (jQuery mobile environment)
This is a workround:
setTimeout(function(){
input.focus();
},500);//milliseconds

Categories

Resources