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?

How to remove seconds of HTML5 input type time

I'm developing HTML5 app for both Android and IOS and encountering some sort of buggy issue.
What I want to achieve is to get HH:MM format of <input type="time">
According to W3C
http://www.w3.org/TR/html5/forms.html#time-state-(type=time)
Default attribute of step is 60s. This means users would never be able to select seconds without any extra attributes and The timepickers of both IOS safari(IOS7/8) and Android(jellybeans - lolipop chrome latest) works as they are expected.
The problem is that Chrome's input displays HH:MM:SS instead of HH:MM. even though SS never get any value but 00
Is there any way to remove SS part?
Edit
This issue is only on Android's Chrome.
JSfiddle : http://jsfiddle.net/yymvLk9a/
thanks in advance

I got a solution for this.
html
<input id="foo" />
js
$("#foo").on("change",function(){
$(this).attr("type","text");
});
$("#foo").on("touchstart",function(){
$(this).attr("type","time");
});
display the value as type="text" and change the type before keyboard shows up.
simple but works great for me.
EDITED
I reported this bug to google.and got confirmed and fixed.
This bug will be disappeared next update.
https://code.google.com/p/chromium/issues/detail?id=459966

If you're getting the time from MySQL you can use
$sql = "SELECT *, TIME_FORMAT(PickupTime, '%H:%i') AS PT FROM Trips WHERE TripID=".$tid;
then when filling the form
type="time" id="pickuptime" name="pickuptime" value="<?php echo $row['PT']; ?>"
This seems to present in Firefox as HH:mm without seconds

Android Knockout Select Problems - Chrome and Native Browser

I'm having separate but related issues relating to dropdown events in both the native and chrome browser on an android device (Samsung Galaxy Tab4).
Chrome - when selecting an item in a dropdown, the change event is fired EVERY time but the UI value doesn't update until focus is changed
Native Browser - The first time a select is changed, everything works fine. All subsequent interactions with select is as follows
--- First time an option is selected, change event DOES NOT fire and value does not update on UI
--- Second time an option is selected, change event does fire, value updates on UI
I'm using knockout with Ajax calls to fill the dropdown list. Here's the template code html (on change event here is just an alert for testing change event):
<div class="col-xs-5 col-sm-5 col-md-2 col-lg-2 search-form-label" data-bind="visibleFade: advancedSearch">
Proceeding Type
</div>
<div class="col-xs-7 col-sm-7 col-md-4 col-lg-4 search-form-data" data-bind="visibleFade: advancedSearch">
<select class="select-12" data-bind="disabled: !proceedingTypeCodes.loaded(), event: {change: onSelectChange}, value: ProceedingType, options: proceedingTypeCodes, optionsText: 'Name', optionsValue: 'Code', optionsCaption: '-- ALL --'"></select>
</div>
The view model is actually built up based on a model brought back from an Ajax call (using the json, it creates the model and binds to self. Values are brought back based on ajax requests, added to select list and loaded is marked as true. This is all called on page load
_dataService.getRemoteSiteData("Case/GetCaseStatusCodes?isForSomething=false", null, _loadCaseStatusCodes);
var _loadProceedingTypeCodes = function (data) {
_viewModel.buildModel({ proceedingTypeCodes: data }, _self);
_self.proceedingTypeCodes.loaded(true);
};
It's worth mentioning that all of this works for all other browsers, devices and platforms. We even have another site that uses this exact same paradigm for building select lists which works great (although there is only one select list on that search page whereas there are multiple ones on this page).
Anyone run into this problem?

I believe this problem is unique to Android's native browser and even when I stripped away knockout, bootstrap, etc, there was still some inconsistency.
What seems to be working is using jquery 'on' and $(this).focus methods to guarantee what you click on is in focus
$('.container').on('click','select',function(){
$(this).focus();
});
I used on as this call is in my _layout page so these inputs won't be on the page when it loads (generally) but it can really go anywhere. Very annoying bug but I think this is a decent workaround.
Related to the chrome issue, this was fixed in Chrome 40.* release

Android Chrome Angular ng-class not updated

You can see a demo where the problem occurs here : http://arca-computing.github.io/MultipleDatePicker/
If you try on Chrome on your PC it's working well : you can select/unselect dates and the red background appears/disappears.
But if you try on Android Chrome, you can select a date, red background appears, but when you deselect it, red background doesn't disappears, it'll disappears at your next touch.
I'm using scope variables for each day with a property "selected". When I debug it the selected property is toggled well.
NG : the calendar is a directive, full code on the github repo (link in the page)
EDIT: looks like it's a focus/hover problem after deselecting a date

Found a workaround : on each day I add a property hover to false, then I use ng-mouseover and ng-mouseleave to toggle this property and apply the style.
<div class="text-center picker-day" ng-repeat="day in days" ng-click="toggleDay(day)" ng-mouseover="day.hover=true" ng-mouseleave="day.hover=false" ng-class="{'picker-selected':day.selected, 'picker-off':!day.selectable, 'hover':day.hover && day.selectable}">{{day ? day.format('D') : ''}}</div>

Android done/go/enter does not fire any DOM event in Cordova

The Issue:
Using
<input id="my_tel" type="tel" onkeypress="alert(event);"/>
<input id="my_num" type="number" onkeypress="alert(event);" />
The issue is that pressing done or enter or go key in android, nothing happens.For all other keys it works fine. When i tried to alert what event is being fired i found none.
The keypad does not hide (which is very sad) on pressing go/enter/done button.
However using
input type="text"
the issue does not exist.
Here is what i tried :
A. Used input type="text" and do not allow user to enter anything except
numbers.
Problem with this approach : The user is always presented with the default textual keyboard, and she/he has to switch, from default text to number pad,
which is not elegant and a turn off as i have many such pages in my project.
B. Used events like 'touchstart'and 'touchend' but no luck.
C. The input box is not even losing focus on key press so the solution
html phonegap android : numeric soft keyboard has next instead of go button is not useful.
Possible solution :
We can use the SoftKeyBoard plugin (https://github.com/phonegap/phonegap-plugins/tree/master/Android/SoftKeyboard). And hope that this problem is solved by this. But seriously can't there be a better solution??
Note : The problem is not observed in the iOS app,just android.
Another Note : No DOM event is fired even on pressing backspace key, but atleast the the backspace key is doing its job. In my case the done/go/enter key does not seem to execute its default behavior.

are you using iScroll?, if you are try removing it for a quick test and see what happens. I use it on a phonegap app and it's doing strange things with the inputs.