How to allow copy and paste from an ionic webview? - android

I am using ionic and cordova to build a hybrid application.
However, I can't copy text from any of my webviews. From my Android phone or from the browser, copying text does not work. Selecting text and dragging the pointer does nothing.
This occurs for instance with the basic app generated by ionic start myApp tabs.
Simply put, how can I allow users to copy-paste?

Make ion-content to overflow-scroll="true" and add a class to your copyable text
.selectable{
-webkit-user-select: auto;
}
You cannot copy anything to clipboard from javascript for now programmatically. However it can be done from native side via plugin CordovaClipboard

.selectext
{
-webkit-user-select: auto;
}
<div class="selectext">
Select text
</div>

You can try with console.log() and copy/paste from the console.
Or if you need to copy from an emulator you can use Remote debugging

Related

Enter event doesn't trigger the function on Android device using angular

There are multiple questions with answers related to my problem but unfortunately, none worked for me.
I have to detect the enter pressed on android keyboard and change focus from current matInput to next matInput.
I have tried keyup.enter, keydown and keypress but none worked for me. I implemented directive approach but doesn't trigger method when I am debugging app on Android device. Although, it does trigger the method on browser.
Here is what I am using.
HTML:
<mat-form-field class="ib-input-container-width">
<input matInput data-dependency="lastName" (keypress)="onChange($event.keyCode)" (keyup.enter)="handleNext('lastName')" [formControl]="form.get('FirstName')" type="text" >
</mat-form-field>
<mat-form-field class="ib-input-container-width" >
<input #lastName id="lastName" matInput [formControl]="form.get('LastName')" type="text">
TS:
handleNext(elementId){
let nextElement = document.getElementById(elementId);
console.log(nextElement);
nextElement.focus();
}
onChange(event){
console.log(event.keycode);
}
PS: I am on a working progressive web app using Cordova.
Update
I have tried solution from https://stackoverflow.com/a/28103608/3081929
But ng-change doesn't work either.
the code looks correct,
before running your codova app on android make sure you have compiled the angular project using angular cli and output should be set to www folder

Show custom navigation on top of inappbrowser Phonegap webview app

I load a webpage via the inappbrowser plugin for my Phonegap app.
The app shows a website and a webshop which are both accessible from the web as well.
I cannot add a button 'go back to app' (this wouldn't make sense when visiting the site from PC). So I want a custom navigation (I prefer bootstrap) in the phonegap app so I can navigate between multiple different websites.
Unfortunately the navigation gets hidden by the inappbrowser. Is there a way to show the app html navigation on top of the inappbrowser?
Thanks a lot!
adding absolute position, z-index 999999 and display block with css didn't help
One way you do could this is inject the button into your webpage by generating it in your Cordova app Webview:
var inAppBrowserRef = cordova.InAppBrowser.open("http://www.mypage.com", "_blank");
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
var button = document.createElement("div");\
button.innerHTML = "Return to app";\
button.classList.add("close_button");\
button.onclick = function() {\
webkit.messageHandlers.cordova_iab.postMessage(JSON.stringify({action: "closeIAB"}));\
};\
body.appendChild(button);\
'
});
});
You'd then add a listener for the message that's posted when the button is click which closes the inappbrowser:
inAppBrowserRef.addEventListener("message", function (params){
if(params.data.action === "closeIAB"){
inAppBrowserRef.close();
}
});
You could also inject the styling of the button from within your Cordova app:
inAppBrowserRef.insertCSS({
"code": "\
.close_button {\
position: fixed;\
bottom: 0;\
z-index: 500;\
width: 100%;\
background: white;\
color: black;\
padding: 10px;\
font-size: 20px;\
}"
});
Or if you prefer, add the button styling to the CSS in your webpage (if it's under your control).
Similarly, if you don't like the idea of creating the button HTML dynamically, you could include it as part of your webpage but hide it by default unless a particular class is injected by the app:
inAppBrowserRef.addEventListener('loadstop', function(e) {
inAppBrowserRef.executeScript({
code: '\
var body = document.querySelector("body");\
body.classList.add("is_app");\
'
});
});
And in your website CSS:
body:not(.is_app) .close_button{
display: none;
}
Note that the emulation of the postMessage API that has been added to cordova-plugin-inappbrowser for Android & iOS by this PR is not yet in the latest release version on npm (v3.0.0) so you'll need to install the plugin directly off the Github master branch (v3.1.0-dev):
cordova plugin add https://github.com/apache/cordova-plugin-inappbrowser
I did this long time ago another way. The in app browser opened a website with a additional GET parameter, so the website knows it's opened inside the app. Then in the website I generated a special button, with href containing a custom scheme and some command. (E.g. myapp://close-browser)
Then I configured the app to capture the custom url by using regular app scheme configuration. Once I captured the command in javascript, I closed the in app browser using it's API.

ionic keyboard focus on input box issue

I am using angular with ionic
I have used below code
<input type="number" name="foo" ng-model="field.field_value" class="form-number" ng-focus="keyboardFocus(this)" >
$scope.keyboardFocus=function(t){
var a= $(t).attr('class');
alert(a);
// $ionicScrollDelegate.scrollBottom();
// $ionicScrollDelegate.$getByHandle(t).scrollTop();
$("."+a).css('position','absolute');
$("."+a).css('top','0px');
}
But scroll is not working in current position on textbox. keyboard focus on textbox is not working but type any text foucus is working
Imho, no need to use $ionicScrollDelegate, change position, scroll manually or any other complicated stuff.
You just need the Ionic Keyboard Cordova plugin to be installed. See the explanation here.
To install it:
cordova plugin add com.ionic.keyboard
Nothing else to do. On focus, the page will move automatically.
Of course, it will work only on real devices, but in my experience, with this plugin, focused form elements are never hidden under the keyboard.
Best way will be to use $ionicScrollDelegate, for that you need to define delegate-handle value on element this way:
<input type="number" name="foo" ng-model="field.field_value" class="form-number" delegate-handle="myInput" ng-focus="keyboardFocus('myInput')" >
And then pass into keyboardFocus this way: ng-focus="keyboardFocus('myInput')" .
And function will become
$scope.keyboardFocus=function(handleValue){
$ionicScrollDelegate.$getByHandle(handleValue).scrollTop();
}

How To Access Files on Android Device Using Ionic Framework

I was working through the Ionic tutorial for using the Cordova Camera API.
http://learn.ionicframework.com/formulas/cordova-camera/
Far as I can tell everything is working correctly with the Camera API functions, but I cannot get my image to display back into the view.
I am able to return a file URI, but when I attempt to put it to the ng-src I get nothing in the view. I am assuming that the application/code cannot access the file location?
My config:
.config(function($stateProvider, $urlRouterProvider, $compileProvider) {
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(https?|ftp|file|blob|content):|data:image\//);
...
The function in my controller:
$scope.getPhoto = function() {
Camera.getPicture().then(function(imageURI) {
console.log(imageURI);
$scope.cameraPic = imageURI;
}, function(err) {
$scope.cameraPic = "error";
console.err(err);
});
};
My view:
<ion-view>
<ion-content>
<div class="form-group padding-top">
<button class='button button-positive' data-ng-click="getPhoto()">
Take Photo
</button>
</div>
<div class="item item-image">
<img ng-src="{{cameraPic}}"/>
</div>
{{cameraPic}}
</ion-content>
</ion-view>
This appears to be the recommended method by the tutorial, and is also repeated on this thread. It sounds like it should work without using a Cordova file service implementation. I have found one such implementation which I guess I could use, but am I missing something here?
EDIT
Using chrome://inspect/#devices, I was able to look into the Webview/Console. I also rebuilt the project, just to see if that would help.
Definitely looking like a local file access issue.
As it turns out, this is an issue unique to using the emulator. I finally found the following on the ngCordova project:
NOTE: The camera API only works on a real device, and not in the
emulator.
Source: http://ngcordova.com/docs/plugins/camera/
This led me to test the code on an actual device using the USB debugger, where the file is accessed by the application and shared with the view as expected. This should be noted as a quirk of the library.

JQuery Mobile / Phonegap on android - all text shows in caps

I am building a phonegap (2.3.0) + jQuery Mobile (1.2) App.
All works reasonably well, but I am not able to get any text to show in mixed upper/lower case letters-
Example:
<p>This is my stuff:</p>
shows up:
THIS IS MY STUFF:
I tried adding style="font-variant: normal"
<p style="font-variant:normal">This is my stuff:</p>
but I still get
THIS IS MY STUFF:
I tried to change the stylesheet on top (all css load before):
<style>
body * {
font-variant: normal !important;
}
</style>
still everything is upper case.
I verified that the font I use is a mixed upper/lower case font and not an all Caps-Font.
Any ideas?
Try text-transform property:
text-transform: none;
Phonegap defines in index.css:
body {
...
text-transform:uppercase;
...
}
Do not know why, just comment it out.
I had the same problem with with phonegap 3.3 jquery 1.4.1 the solution was to chance the index.css
body {
...
text-transform:uppercase;
...
}
to
body {
...
text-transform:none;
...
}

Categories

Resources