Develop Reference

Cordova backspace cannot remove image in contenteditable div

I'm using Cordova 3.6.4 in Visual Studio 2013 Community Update 4 to build an apps with a "chat" functionality, the main reason that I use this technology is because I want to, hopefully, write once and can use it in all platforms such as Android phones, iPhones, all mobile phone browsers, all desktop browsers.
In order to let the users inputting the "message" to be sent, I create a [div] which is contenteditable="true" at the bottom left of the html, at the right hand side of this [div], I have two [image buttons], one is the [happy face] button, the other is the [send button]. (You know, just like Whatsapp, Line and WeChat!)
At any time the user can click the [happy face] button to select one of the many "face image" to insert into the cursor at the [div], then I'll add the html codes into the [div], e.g. div.innerHTML += '< img src="1.jpg">'
So, the innerHTML of this [div] can contain characters AND images, e.g.
12< img src="1.jpg" />34< img src="2.jpg" />
Of course, the actual display is:
12[1st Picture]34[2nd Picture]
If the cursor is at the end of this [div], and I clicked the [BACKSPACE], I expect the [2nd Picture] will be removed, if I clicked the [BACKSPACE] again, I expect the letter [4] will be removed from the [div], this is work at ALMOST every platform I mentioned including all mobile browsers in android and iphone/ipad, all desktop browsers. But it does not work when I build an Android app and run it in any Android phone.
Running it as a WebView in android phone, when I click the the [BACKSPACE], the letter [4] is removed instead of the [2nd Picture], when I click the [BACKSPACE] again, the letter[3] is removed. I can NEVER remove the 2 images no matter which IME I'm using.
To work around, I tried to add a keyup/keydown/keypress listener to the [BACKSPACE] but it never fires.
At last, to work around this [BUG], I need to add a third [X] image button and use JavaScript string.replace to remove the < img> tag when users click this [X] button, but it looks very stupid to the users!
It makes me crazy that ALL IMEs do not remove the image for me by pressing the [BACKSPACE], and if the key events are not fired, I cannot remove the images myself!
I tried ALMOST, I think, ALL the suggestions provided by stackoverflow but they don't work at all, either not applicable to CORDOVA, or with compilation error such as [command failed with exit code 8] in Visual Studio.
What should I do?

pagechange method doesn't work on android 2

I have set up a small mobile application and during tests I have stumbled upon a problem with older versions of mobile devices running Android version 2. Please note that iPhones, iPads and newer versions of Android, namely 4.xx display the pages well. The problem is as follows:
When page is called directly from the link:
Home
it is properly displayed.
However, when there is a click handler on a link, like here:
$(document).on('click', '#lstAddrList li', function ()
{
var anchor = $(this).find('a');
sessionStorage.SiteAddr = anchor.attr('id');
changePage();
});
the list line (in this case) stays selected and nothing happens. It is ONLY after the calling page is refreshed directly from the browser when the called page is displayed. I have a feeling that older Androids do not properly handle changePage() method.
Will you have some ideas?

kendo UI mobile ListView hang after opening external link on native browser

In a Kendo UI Mobile ListView, a script to open an external link by native browser is called when a link is clicked.
The PhoneGap script is as follow:
On Android:
navigator.app.loadUrl(link, { openExternal:true } );
On iOS:
window.open(link, '_system');
The link can be opened on the corresponding native browser.
However, when the user switch back to the app from the native browser, some problems happen.
On Android, the screen hung on the original view, when the back button is pressed again, the screen is un-freezed and can be refreshed.
On iOS, however, the screen is also hung on the original view. When tapped on the screen, the complete view (with the layout) is moved. There is no way to un-freeze this screen.
How to fix this so that the screen can be un-frezzed after switching back from the native browser to the app?
Thank you very much for your help.
Updated 1:
I changed the original tag to a tag, everythings work now. But I am still curious to see if it is certain kind of bugs for Kendo UI Mobile.

There is a serious problem with Kendo Mobile hanging the page completely, making the app totally unresponsive to touch/mouse. The offending CSS is in Loader.transition() which does this.container.css("pointer-events", "none") which is equivalent to:
document.body.style.pointerEvents = "none";
Ouch - that is ugly. Plus in _attachCapture there is offensive JavaScript for all mouse and touch events that does:
event.preventDefault();
Fatal if using an app with an embedded full page WebView/UIWebView (requiring app to be closed and restarted).
Hangs can happen if:
You have an exception in your code (even in unobvious places),
You mistype a transition (no exception, just hangs),
A user's browser doesn't fire the transitionEnd event properly for some reason (This was repeatable for one user's up-to-date Chrome browser.
There is a failure mode in the Interaction between page transitions and Loader (depending on timing, couldn't repeat),
Multiple other causes
Note that there is a comment in Kendo that says: "This should be cleaned up at some point (widget by widget), and refactored to widgets not relying on the complete callback if no transition occurs.", so clearly Telerik know there is a problem.
You can use the following code during development to at least warn when Kendo Mobile has crapped itself:
var transitionTimer;
kendo.mobile.ui.Loader.prototype.wasTransition = kendo.mobile.ui.Loader.prototype.transition;
kendo.mobile.ui.Loader.prototype.transition = function() {
transitionTimer = setTimeout(function() {
alert('Kendo has hung the page');
}, 10000);
this.wasTransition.apply(this, arguments);
}
kendo.mobile.ui.Loader.prototype.wasTransitionDone = kendo.mobile.ui.Loader.prototype.transitionDone;
kendo.mobile.ui.Loader.prototype.transitionDone = function() {
clearTimeout(transitionTimer);
this.wasTransitionDone.apply(this, arguments);
}

Why is this onclick event not working on Android and iPhone?

I am using Prototype JavaScript library for creating dynamic drop-down menus. Before the page loads, there is no event attached to the select statements with id, id_bran and id_gen. As can be seen, the init_image is called when the page loads, and the onclick event is attached to those select statement.
This works fine in desktops where I can use a mouse to execute the click event. It however does not work in my Android and iPhone browsers. When the page loads, the init_image is called and the getval function is executed. Later however, when I make a selection in the dropdown menu, the onclick event does not call the getval function. So I am confident that the prototype library is working on my Android and iPhone as the ajax request is made on page load but it fails subsequently. What's going wrong here?
<!--
MY HTML body->onload
The init_image is called the first time when the page is loaded
-->
<body onLoad="init_image();">
//Javscript function called on page load
function init_image() {
getval();
//Assigning the event to id_gen and id_bran for mouse clicks
document.getElementById("id_gen").onclick = getsize;
document.getElementById("id_bran").onclick = getsize;
};
//Javascript function called on page load and during mouse click on the select
//statement with id = id_bran and id_gen
function getval() {
ur = 'szv/c1--'+$F('id_bran')+'/g1--'+$F('id_gen');
new Ajax.Request(ur,
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText;
$('id_val').replace(response);
}
});
};

First of all, you're force-injecting events and the load event which may lead to potential cross-browser issues. If you're using prototype.js, rely on it's native methods which are cross-browser:
<script type="text/javascript">
document.observe("dom:loaded", function() {
.. your code here ..
});
</script>
Then again for properly localizing and observing the click events, instead of:
document.getElementById("id_gen").onclick = getsize;
Use something like:
$('id_gen').on('click', getsize(e).bindAsEventListener(this)); // for prototype 1.7 branch
Or:
$('id_gen').observe('click', getsize(e).bindAsEventListener(this)); // for prototype 1.6 branch
Also by setting passing the e variable there, your getsize() function will have the Event object there, so you could stop it's native behaviour (like leading to #):
function getsize(e) {
e.stop();
.. your code here ..
}
Additionally, it would be best and much less bloated if you lock your whole logic into class and create an object for it... but that's a whole different story... :)
prototype.js is a powerfull tool, but needs some care.
I would suggest you reading some basics on the framework and following the API documentation later on:
http://prototypejs.org/learn/
http://api.prototypejs.org/

What DOM events are available to WebKit on Android?

I'm building a mobile web app targeting Android users. I need to know what DOM events are available to me. I have been able to make the following work, but not terribly reliably:
click
mouseover
mousedown
mouseup
change
I have not been able to get the following to work:
keypress
keydown
keyup
Does anyone know the full list of what is supported and in what contexts (e.g., is onchange only available to form inputs?)? I can't find a reference for this on The Googles.
Thanks!
Update: I asked the same question on the Android developers list. I will be doing some more testing and will post my results both here and there.

OK, this is interesting. My use case is that I have a series of links (A tags) on a screen in a WebKit view. To test what events area available, using jQuery 1.3.1, I attached every event listed on this page (even ones that don't make sense) to the links then used the up, down, and enter controls on the Android emulator and noted which events fired in which circumstances.
Here is the code I used to attach the events, with results to follow. Note, I'm using "live" event binding because for my application, the A tags are inserted dynamically.
$.each([
'blur',
'change',
'click',
'contextmenu',
'copy',
'cut',
'dblclick',
'error',
'focus',
'keydown',
'keypress',
'keyup',
'mousedown',
'mousemove',
'mouseout',
'mouseover',
'mouseup',
'mousewheel',
'paste',
'reset',
'resize',
'scroll',
'select',
'submit',
// W3C events
'DOMActivate',
'DOMAttrModified',
'DOMCharacterDataModified',
'DOMFocusIn',
'DOMFocusOut',
'DOMMouseScroll',
'DOMNodeInserted',
'DOMNodeRemoved',
'DOMSubtreeModified',
'textInput',
// Microsoft events
'activate',
'beforecopy',
'beforecut',
'beforepaste',
'deactivate',
'focusin',
'focusout',
'hashchange',
'mouseenter',
'mouseleave'
], function () {
$('a').live(this, function (evt) {
alert(evt.type);
});
});
Here's how it shook out:
On first page load with nothing highlighted (no ugly orange selection box around any item), using down button to select the first item, the following events fired (in order): mouseover, mouseenter, mousemove, DOMFocusIn
With an item selected, moving to the next item using the down button, the following events fired (in order): mouseout, mouseover, mousemove, DOMFocusOut, DOMFocusIn
With an item selected, clicking the "enter" button, the following events fired (in order): mousemove, mousedown, DOMFocusOut, mouseup, click, DOMActivate
This strikes me as a bunch of random garbage. And, who's that cheeky IE-only event (mouseenter) making a cameo, then taking the rest of the day off? Oh well, at least now I know what events to watch for.
It would be great if others want to take my test code and do a more thorough run through, perhaps using form elements, images, etc.

Since this is the second most popular Android + JavaScript post on SO (which is just a sad commentary on the state of web development targeting the Android platform), I thought it may be worthwhile including a link to pkk's touch event test results at http://www.quirksmode.org/mobile/tableTouch.html and also http://www.quirksmode.org/mobile/ in general.

As of Android 1.5, the same touch(start|move|end|cancel) events that the iPhone supports work in Android as well.
One problem I found was that touchmove ends get queued up. No workaround yet.