Develop Reference

Ionic - text input on Android 10+ not echoed

I've been experiencing the most peculiar error with my Ionic app when running it on Android 10.
The attached gif should pretty much sum up what's the problem but what I can tell is that it's working properly on Android devices with a version lower than ten.
Basically speaking, none of the actual input is echoed to the screen unless I hit some visual divider (ie space). It applies to virtually every text input in the app but the login screen should be enough to get the idea.
Text input on android 10 device:
And to provide some code as well, this would be the affected login code snippet.
<ion-content no-bounce id="login-content">
<img
src="assets/logo/datenpool-logo-blue.svg"
alt="datenpool-logo"
title="datenpool-logo"
id="datenpool-logo"
/>
<form [formGroup]="loginForm">
<div fxLayout="column" fxLayoutAlign="center center">
<ion-input
placeholder="{{ 'authentication.login.form.username' | translate }}"
type="text"
formControlName="username"
[formControl]="loginForm.controls['username']"
required
></ion-input>
<ion-input
placeholder="{{ 'authentication.login.form.password' | translate }}"
type="password"
formControlName="password"
[formControl]="loginForm.controls['password']"
required
></ion-input>
<mat-error *ngIf="isInvalid">
{{ error }}
</mat-error>
<button
(click)="login()"
type="submit"
[disabled]="!loginForm.valid"
class="button"
>
{{ 'authentication.login.form.button' | translate }}
</button>
</div>
</form>
<div fxLayoutAlign="center center">
<button (click)="forgotPassword()" class="forgotpw">
{{ 'authentication.login.forgot-password' | translate }}
</button>
</div>
</ion-content>
Personally I doubt that the code is faulty but rather that it's something to do with Android and its predictive text feature.
At any rate, I hope somebody can point me towards the right direction; thanks in advance, guys.

I managed to find the reason behind the problem.
What I didn't mention is that the project is using Capacitor. And due to that there exists a capacitor.config.json. And in that JSON file there's a dedicated android block with the following properties:
"android": {
"backgroundColor": "#ffffffff",
"allowMixedContent": true,
"captureInput": false,
"webContentsDebuggingEnabled": true
},
What happened was that captureInput was set to true. And what captureInput does is to replace the standard Android keyboard with a simpler one thus enabling devs to use key capture events more easily.
What it apparently also does is to render text input on Android 10 virtually useless.

Social button not working in Phonegap Android webview

<div class="fb-like" data-href="http://www.mywebsite.com" data-layout="button_count" data-action="like" data-size="large" data-show-faces="false" data-share="true"></div>
Tweet
<div class="fb-messengermessageus"
messenger_app_id="xxx"
page_id="xxx"
color="white"
size="large">
</div>
I am trying to show Facebook Like, Share and Twitter tweet buttons on my phonegap app.
When running the above codes on my actual device, Facebook related buttons are totally not visible.
Twitter tweet button is visible, but if you press it, there is an error that says 'Refused to display 'https://twitter.com/intent/tweet?....'
If I try to add the following in my config.xml:
<access origin="tel:*" launch-external="yes" />
<access origin="http:*" launch-external="yes" />
<access origin="https:*" launch-external="yes" />
Then pressing tweet button will have no error, but still, nothing shows up.
Why? How to make these buttons open up corresponding apps or external browser?

In Phonegap you can open the in app browser like so:
window.open('fb://profile/xxxx', '_blank', 'hidden=yes');
Please refer to This documentation in order to move forwards. You may have to encode all of the parameters you mentioned above in your URL.

ionic and cordova - css active not working on android device

I am using ionic framework with cordova platform. The css for active state of an element (div, button or a) works fine in browser during development/testing but not at all in android device/emulator
i have defined some classes
.bg-dark {
background: #333333 !important;
}
.bg-active-darkBlue:active {
background: #16499a !important;
}
and following html
<a class="fg-white bg-active-darkBlue button" style="background-color:#3B5998;">Sign in with Facebook</a>
even tried this (got on ionic forum)
<a ng-mousedown="class='bg-active-darkBlue'" ng-mouseup="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>
tried for a,div and button tags.
still not working on android, only works in browser, please help.

By experience, angular ng-mousedown andng-mouseup events do not fire up on the mobile device. My experience was ionic 1.6.4 on iOS.
However, on-touch and on-release works flawlessly well. So just replace ng-mousedown and ng-mouseup with on-touch and on-release, respectively.
<a on-touch="class='bg-active-darkBlue'" on-release="class='bg-dark'" menu-close class="fg-white {{class}}">Sign in with Facebook</a>
Here is the pointer to the ionic reference documentation on the on-touch and on-release events.
Hope this helps..

Apparently, the "right" way of doing this is according to
phonegap-tips.com is to add an ontouchstart="return true;" on the element.
eg.
<a class="bg-active-darkBlue" ontouchstart="return true;">:active now works in cordova</a>
That worked for me, so I hope it works for you too.

phonegap google play and mail link

I've a problem with links.
I want to add an android / ios market link. and mail link and image from external url.
tried for market link;
1. App
2. App
3. App
tried for mail link;
my#my.com
and config.xml file;
<access origin="mailto://my#my.com" launch-external="yes" />
image from external URL;
<img src="http://a.my.com/img.png" />
config.xml file;
<access origin="http://*.my.com" />
but not working. How can I add links? Thanks..

install inappbrowser plugin
install email composer
To open Temple Run in play store
<script type="text/javascript">
function openTR(){
window.open("market://details?id=com.imangi.templerun2", "_system");
}
function sendEmail(){
cordova.plugins.email.open({
app: 'gmail',
to: 'my#my.com',
subject: 'Greetings',
body: 'How are you?'
});
}
function openLink(link){
window.open(link, '_blank', 'location=yes');
}
</script>
<input type="button" value="Temple Run" onclick="openTR()">
<input type="button" value="Send Email" onclick="sendEmail()">
EDIT check openLink function defenition above
while creating <li> elements using js
"<li onclick='openLink(\"+"value.link+"\")' />"+value.title+"</li>"
Output

From Javascript,
window.location.href = "mailto:support#google.com";
window.location.href = "market://details?=com.my.app";
This will do the wonder.

I usually do something like this:
In string file
<string name="my_link"><a ref="https://google.com">Click This Link!</a></string>
in layout
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true"
android:text="#string/my_link"
android:autoLink="web" />

External URL in Phonegap

I want to open a link say www.google.com in Phonegap Android... I've tried lot of things but I'm not able to open any link.
<access origin="http://google.com" /> is already added to config.xml.
navigator.app.loadUrl('http://google.com'); is giving an error.
$('#pageID').load('http://google.com',function(){
$('#pageID').trigger('create');
});
is loading the page but the images are not displayed, which is required in my case.
Can anyone explain how to actually open a link in Phonegap.

Well it seems its not possible ..... but I found that we can do it other way round.
We know this works :-
<a data-role="none" id="someID" href="#" target="_blank">
So we can write jQuery as :-
$('#idAnchorTag').attr('href','some URL');
So the complete code is :- (Assuming that click was made on an image)
<a data-role="none" id="idAnchorTag" href="#" target="_blank">
<img id="idIMG" src="some IMAGE">
</a>
And the JS :-
$(function() {
$("#idIMG").click(function(){
$('#idAnchorTag').attr('href','some URL');
});
});

try
$('#pageID').onClick(function(){
document.location.href="http://google.com";
})