We Keep Coding

Phonegap Android show keyboard on input focus Javascript

I have been searching for how to trigger the android keyboard via Javascript.
I have found a few answers but none of them seem to work.
One solution is here:
Showing Android's soft keyboard when a field is .focus()'d using javascript
On the example above there is a button involved which I don't have, but do I need it?
I am using 'tap' and 'swipe' events via the touch-layer.js which seems to disable click events in favour of tap. (https://github.com/cubiq/touch-layer)
Below is the code I've tried, the alert triggers and the focus happens but the keyboard doesn't show.
gt("#txtEmail").on("tap", function() {
alert('tap');
$(this)[0].el[0].focus();
$("#txtEmail").trigger('click');
});
Thanks.
EDIT 1: Second attempt doesn't work even though this seems more inline with the example.
gt("#txtEmail").on("tap", function() {
alert('trigger');
$("#txtEmail").trigger('click');
});
$("#txtEmail").on("click", function() {
alert('recieved');
$(this).focus();
});

In addition to Jack He's suggstion, check out ionic-plugin-keyboard. This one is more actively maintained and used by many.
In my case, I just bound focus event to a handler function that manually shows the keyboard.
$(".my-input").on("focus", function(e) {
...
cordova.plugins.Keyboard.show();
...
});

What you need is the SoftKeyBoard plugin. Just check the link to find what you want.

Cannot get focus to return to div after input blurs

http://jsfiddle.net/NsRyr/1/
I am totally stumped on this. Here's what I'm trying to do : I have a div element (call it #keys) that I'm using to handle keypress events.
HTML:
<div id="#keys" tabindex="1">Focus</div>
JS:
$('#keys').keydown(function () {
$('#log').append('*'); // just note that an event happened
});
This works as expected -- as long as #keys is focused, I can receive keypress events and respond to them. In addition, I can set focus to other div elements and the keypress events will no longer be handled by #keys. I can then re-focus the div (e.g., by clicking on it directly, or by responding to a click event on another DOM element) and keypress events are handled as I expect.
So far, so good. The problem that I've come across is that if I focus an input element and then try to re-focus #keys by setting a blur handler that's activated after tabbing away from the input, the #keys div does not receive focus ! It works fine if I blur away from the input by clicking, but not if I use the keyboard.
$('#input').blur(function () {
$('#log').append('blur'); // note that a blur happened
$('#keys').focus();
});
I think the essence of this question is, why doesn't my blur handler on #input seem to work properly when tabbing away from the input (but it does work properly when clicking away) ? Is this just a browser quirk ? (I am using Chrome 30.0.1599.101 on Mac OS.)
This is my first SO question regarding JS, so please let me know what additional detail I can provide to describe the situation.
(Edit : Interestingly, it seems to work fine if I shift-tab away from #input. Still confused what's happening here ; appears to be some sort of tabindex-related issue ?)

I don't have commenting privileges yet, so I'll have to answer, but please mods should change this, because it's basically a duplicate.
Here's the fix to your fiddle:
http://jsfiddle.net/NsRyr/3/
The issue (as described in this answer) is that the blur event fires before the change is done, so the focus needs to be sent down the stack to happen after. Adding a timer deals with the issue.
The line I changed was:
setTimeout($('#keys').focus.bind($('#keys')), 0);
That makes it so it'll wait until the new focus event is completed before firing off the handler.

jQuery find(':focus') not acting as expected

I'm making a widget that slides in and out of view on hover with showTracker and hideTracker functions. I want to prevent it from sliding out of view if it contains a focussed form element though, so I've got this going:
function hideTracker(){
if($('#tracker').find(':focus').length == 0){
$('#tracker').stop().hide();
}
}
Cool. Now it doesn't hide if the mouse happens to move out if there's a field in focus. Unfortunately, that also means that when the field does lose focus (and it's time for the widget to hide again) it just stays there. The unHover event has been and gone.
So I added this:
$('#tracker *').blur(function(){
hideTracker();
});
And that works too - with one little bug that I need help with!
If the focus moves from one element within the tracker to another which is also within #tracker, the tracker hides. I figured that if($('#tracker').find(':focus').length == 0) would return false, given that the next form element has focus, but I guess it doesn't.
Is it the case that .blur() fires before the next element attains focus?
How can I get around this?

How about something like this?
$('body *').focus(function(){
if(!$(this).is('#tracker *') && $('#tracker:visible').length != 0) hideTracker();
});

Yikes. Tricky. Yes, what's happening is:
mousedown: old form element gets the blur event. $(':focus').length == 0.
mouseup: new form element gets the focus event. $newFormElement.is(':focus') == true.
This is an improvement:
$('#tracker').focusout(function() //basically like $('#tracker, #tracker *').blur(), but "this" is always '#tracker'
{
if(!$(this).is('#tracker:hover')) //for some reason plain old :hover doesn't work, at least on the latest OS X Chrome
hideTracker();
});
But it's not perfect. It only really works if you use the mouse. If you use tab to move between fields (or some other possible mechanism) while your mouse is not hovering over #tracker, it won't work.
Here's another attempt. It's a bit...hackier. The gist is that, instead of handling the blur event, you handle the focus event of the second thing that's focused. But! What if you click something that can't be focused? Blank space on your page? Then no focus event is fired.
Okay. So the trick is: put a tabindex="0" in your root <html> tag. This means that there is always something that can be focused. So there's no way to focus on nothing (at least, I don't think so).
Then you can do this:
$('*').live('focus', function(e)
{
if(!$.contains($('#tracker')[0], this)) //if the new thing you focused on is not a descendant of #tracker
hideTracker();
e.stopPropagation();
});
Eh? So yeah, that's a certified hack. But it's a tough problem, and that's the best I can come up with at this hour.

Thank you all for your answers. Utilising the .focus() event rather than .blur() was a clever way to look at it. Unfortunately, it does raise a couple of browser problems, and I couldn't get any of the above working very robustly.
In the end I decided to use setTimeout(hideTracker, 100); to allow the focus() event to take place before the count of focussed elements within tracker was evaluated. Not ideal, but it's working well and the delay is fairly imperceptible.
Thanks again.

Form input loses focus on scroll bar click in IE

I hope someone can help me. I know this has been discussed here before but the example is prototype and foreign to me. I'm looking for a strict javascript or jquery solution. I have an example setup here. Click on the scrollbar in FF and you don't get an alert but click on it in IE and you do. Please help me, thanks!

After some searching I came up with this answer. From the best of my knowledge, you cannot actually cancel the blur event, nor can you call the focus event at the same time. This is what I don't get .. you can blur on focus but you cannot focus on blur .. Anyway my solution is use the setTimeout function to call the focus event 1ms after the focus was lost.
var o = this;
oTimeout = setTimeout(function(){
o.focus();
},1);
Using mouseenter and mouseleave events, I set a boolean to refer to on blur event
$("div#box").mouseenter(function(){
changeFocus(1);
}).mouseleave(function(){
changeFocus(0);
});

I've had the same problem and this works for what need it to do. Just force the focus back on the element.
$('#divWithScrollBar').scroll(
function () {
$('#elementThatLosesFocus').focus();
});
That event is somehow triggered after the element is blurred, but before the onblur event is kicked in. Haven't really looked in to it, but that's what seems to be going on.
The scroll does appear a bit slow, but it works.
IE owes me many hours of my life back.

What's the difference of Click-to-focus and focus-by-javascript?

I met one troublesome web page whose structure is complicated. If one DIV is clicked by mouse, everything is OK. However, if it is focus-ed by javascript(i.e. divElement.focus). The layout turns to messy. This only happens in IE7/8.
So, is there any difference between click-to-focus and focus-by-javascript in IE?

Firing a Javascript focus event does not fire a click event. Without seeing the relevant code, I'm led to guess that some click handler is in place that is not being called in the case where you fire a focus event.
You might try, instead, firing a click:
var clickEvent;
if(document.createEvent) {
clickEvent = document.createEvent('click');
clickEvent.initMouseEvent('click');
divElement.dispatchEvent(clickEvent);
} else {
// Semi-pseudocode for IE, not tested, consult documentation if it fails
clickEvent = document.createEventObject();
divElement.fireEvent('onclick');
}
Or if you're into the jQuery thing:
$(divElement).click();
There's similar solutions for Prototype as well (search for Event.simulate).

The definition of the Focus action is to bring the input (keyboard or mouse) to a certain element, usually an input field. When an element gains focus, an OnFocus event is fired. When it loses focus, an OnBlur event is fired.
What you usually get by clicking is the OnClick event, which is not necessarily related to the above two.

This only happens in IE7/8.
Hmm, then I'm sure it's an IE related bug. Not surprising. If there is legitimate Javascript events involved, then they should fire uniformly across all browsers.